angularjs – ng-Animate不适用于“隐藏和显示”设置

发布时间：2020-12-17 08:04:11 所属栏目：安全来源：网络整理

导读：我正在使用AngularJS版本1.2.11。我已经设置了一个工具栏，可以使用ng-Animate(显示和隐藏)进行过渡。这是HTML： div div class="full-height" menu-main class="full-height pull-left"/menu-main menu-sub class="full-height pull-left" ng-show="data.a

我正在使用AngularJS版本1.2.11。我已经设置了一个工具栏，可以使用ng-Animate(显示和隐藏)进行过渡。

这是HTML：

<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

.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.940) 3.5s;
    -o-transition:all cubic-bezier(0.250,0.940) 3.5s;
    transition:all cubic-bezier(0.250,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;
}

动画不起作用，我不确定我是否正确这样做。

ng-animate属性在1.2中已弃用，不再使用。相反，动画现在是基于类的。

还要确保引用angular-animate.js并将ngAnimate添加为依赖模块：

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

然后，您可以命名动画，例如’fadein’和’fadeout’，并按照Angular documentation中的特殊命名约定，使用一些其他类来装饰它们。

关于这个主题的另一个好消息来源是Year of moo。

法丁的例子：

/* After the transition this will be the only class remaining */
.fadein {
  -webkit-transition:all cubic-bezier(0.250,0.940) 1.5s;
  -moz-transition:all cubic-bezier(0.250,0.940) 1.5s;
  -o-transition:all cubic-bezier(0.250,0.940) 1.5s;
  transition:all cubic-bezier(0.250,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;
}

演示：http://plnkr.co/edit/V9w2EwUh0unszf62TZZB?p=preview

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!