Question

案例：

<div class="slide" ng-show="condition" >

我有一个指令设置为类，它在显示时将幻灯片行为提供给div 当我使用ng-if代替ng-show以便代码不会被执行，除非条件确实适用，幻灯片行为不再有效，而ng-show则有效。

有解决方法吗？超时可能吗？

<div class="slide" ng-if="condition" >

Answer 1

这是预期的。 ngIf动画的定义与ngShow动画不同。

执行动画的正确方法是包含ngAnimate模块，然后为要设置动画的每个指令添加动画CSS（例如ngIf，ngShow，{{3 }}）。

/* ng-if */
.slide.ng-enter, 
.animate-if.ng-leave {
  transition: all 1s;
}

.slide.ng-enter,
.slide.ng-leave.ng-leave-active {
  transform: translateX(-100px);
}

.slide.ng-leave,
.slide.ng-enter.ng-enter-active {
  transform: translateX(0);
}

/* ng-show */
.slide {
  transform: translateX(0);
}

.slide.ng-hide-add.ng-hide-add-active,
.slide.ng-hide-remove.ng-hide-remove-active {
  transition: all 1s;
}

.slide.ng-hide {
  transform: translateX(-100px);
}

Answer 2

试试此代码

 <div ng-class="{slide: true}" ng-if="condition" >

ng-if在ng-show执行时不添加行为

2 个答案: