Question

我正在尝试为我的过滤器在我的小角度应用中显示的结果设置动画...然而，重点是它只是呈现新的List项而不是隐藏/显示所有项目等。

如何在用户过滤时将结果显示为fadeout / in？

我为我当前的代码创建了一支笔：http://codepen.io/anon/pen/mPxEGE

我尝试将ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}"添加到我的列表项中，但无济于事。它只是在未在过滤器中使用时完全移除LI。 P.s我注意到我的“男性”过滤器无法正常工作：'）

Answer 1

您必须为animate-enter和animate-leave

添加css

输入：animate-enter＆amp;动画进入活性
For Leave：animate-leave＆amp;动画-离开活性

与指定的here

一样

添加：

.animate-enter {
    -webkit-transition: 1s linear all; /* Chrome */
    transition: 1s linear all;
    opacity: 0;
}

.animate-enter.animate-enter-active {
    opacity: 1;
}

这是updated codepen。我的动画效果不是很好^^

PS。你也不需要将ngAnimate注入控制器。

Answer 2

我在您的<li>元素和适当的CSS上添加了一个类，它可以正常运行。

<强> HTML

<li class="item" ng-repeat="item in items | filter:search:strict">
        {{item.name}}
</li>

<强> CSS

.item.ng-move,
.item.ng-enter,
.item.ng-leave {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.item.ng-leave.ng-leave-active,
.item.ng-move,
.item.ng-enter {
  opacity:0;
}

.item.ng-leave,
.item.ng-move.ng-move-active,
.item.ng-enter.ng-enter-active {
  opacity:1;
}

Answer 3

角度动画只能以两种方式实现。通过$ animate提供者或通过CSS。

/*


We're using CSS transitions for when
  the enter and move events are triggered
  for the element that has the .repeated-item
  class
*/
.repeated-item.ng-enter, .repeated-item.ng-move {
  -webkit-transition:0.5s linear all;
  -moz-transition:0.5s linear all;
  -o-transition:0.5s linear all;
  transition:0.5s linear all;
  opacity:0;
}

/*
 The ng-enter-active and ng-move-active
 are where the transition destination properties
 are set so that the animation knows what to
 animate.
*/
.repeated-item.ng-enter.ng-enter-active,
.repeated-item.ng-move.ng-move-active {
  opacity:1;
}

http://codepen.io/TheLarkInn/pen/qZoaWE

这是一个为您的重复列表实现动画的codepen。此示例直接来自documentation。

使用选择框过滤器的角度动画

3 个答案: