带角度的css动画答案

【问题标题】：css animation with angular带角度的css动画
【发布时间】：2016-03-04 15:31:13
【问题描述】：

我似乎对与角度相结合的动画有问题。我的 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 内容出现动画，但它只是定期出现，没有动画。我做错了什么？

提前致谢。

【问题讨论】：

标签： html css angularjs css-animations

【解决方案1】：

很遗憾，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>

【讨论】：

【解决方案2】：

您应该将$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 文档的示例：

.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>

你有一个模型可以用来不显示或隐藏吗？

【讨论】：