NG-动画不工作了隐藏和显示设置 [英] ng-Animate not working for a Hide and Show setting

问题描述

我已经设置一个工具栏进出用NG-动画（显示和隐藏）的过渡滑动。
这里是

I've set a toolbar to slide in and out with a transition using ng-Animate (show and hide). Here is the

 <div>
  <div class="full-height">
    <menu-main class="full-height pull-left"></menu-main>
    <menu-sub class="full-height pull-left" ng-show="data.active" ng-animate="'animate'">
    </menu-sub>
  </div>
</div>

这是相同的工具栏元素的CSS

And here is the css for the same toolbar element

.animate.fade-hide, .animate..fade-show {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
}
.animate.fade-hide, {
    position: fixed;
    top: 500px;
    opacity: 0.3;
}
.animate.fade-hide, .animate.fade-hide-active 
{
    position: fixed;
    top: 500px;
    opacity: 0.3;
}
.animate.fade-show {
    position: fixed;
    top: 100px;
        opacity: 1;
}
.animate.fade-show, .animate.fade-show-active {
    position: fixed;
    top: 100px;
        opacity: 1;
}

动画不工作，我不知道，如果我正确地这样做。

The animation does not work, and i'm not sure if i'm doing this correctly.

推荐答案

在NG-动画属性德$ P $ 1.2 pcated和不再使用。相反，动画现在基于类的。

The ng-animate attribute is deprecated in 1.2 and no longer used. Instead, animations are now class based.

另外，还要确保你引用角animate.js 并添加ngAnimate作为相关模块：

Also make sure you are referencing angular-animate.js and adding ngAnimate as a dependent module:

var app = angular.module('myApp', ['ngAnimate']);

您再命名的动画，例如淡入和淡出，并与下面的一个特殊的命名约定一些额外的课程，可以在角的documentation 。

You then name your animations, for example 'fadein' and 'fadeout', and decorate them with some additional classes following a special naming convention that can be found in the Angular documentation.

在话题另一个很好的来源是哞的。

Another good source on the topic is Year of moo.

淡入例如：

/* After the transition this will be the only class remaining */
.fadein {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  opacity: 1; /* Default value but added for clarity */
}

/* Initial state when showing */
.fadein.ng-hide-remove {
  opacity: 0;
  display: block !important;
}

/* Will transition towards this state */
.fadein.ng-hide-remove.ng-hide-remove-active {
  opacity: 1;
}

演示：<一href=\"http://plnkr.co/edit/V9w2EwUh0unszf62TZZB?p=$p$pview\">http://plnkr.co/edit/V9w2EwUh0unszf62TZZB?p=$p$pview

这篇关于NG-动画不工作了隐藏和显示设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！