带有角度的css动画

Question

我似乎对与angular相结合的动画有问题。我的html中有以下div：

<div class="show-hide" ng-show="questionOfType === '1'">...</div>

我有以下css：

.show-hide {
        -webkit-transition:all linear 2s;
        transition:all linear 2s;
    }

因此，我期望的是，一旦questionOfType设置为1，我将看到div内容与动画一起出现，但它只是常规地显示，没有动画。我做错了什么？

提前谢谢。

Answer 1

您应该将$animate作为模块加载：

https://docs.angularjs.org/guide/animations

这是他们主页上使用css (和$animate)的例子。

<div ng-init="checked=true">
  <label>
    <input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible...
  </label>
  <div class="check-element sample-show-hide" ng-show="checked" style="clear:both;">
    Visible...
   </div>
</div>

$animate与css协同工作。

再举一个来自angular docs的例子：

.sample-show-hide {
  padding:10px;
  border:1px solid black;
   background:white;
}

.sample-show-hide {
  -webkit-transition:all linear 0.5s;
   transition:all linear 0.5s;
 }

.sample-show-hide.ng-hide {
   opacity:0;
 }

因此，更改为：

<div class="check-element show-hide" ng-show="questionOfType === '1'">....</div>

你有没有模型可以用来决定是显示还是隐藏？

Answer 2

不幸的是，CSS不能在display: block和display: hidden之间进行动画转换，而这正是ng-show正在切换的。

相反，您可以在0和1之间设置不透明度的动画：

.show-hide {
    -webkit-transition: opacity linear 2s;
    transition: opacity linear 2s;
    opacity: 0;
}
.show-hide.active {
    opacity: 1;
}

在标记中，使用ng-class切换我在上面指定的active类

<div class="show-hide" ng-class="{'active': questionOfType === '1'}" ng-show="questionOfType === '1'">...</div>