使用css以角度显示隐藏动画[关闭]

【问题标题】：show hide animation in angular using css [closed]使用css以角度显示隐藏动画[关闭]
【发布时间】：2016-07-14 13:38:52
【问题描述】：

在角度我想显示/隐藏一个 div ，我已经使用ng-if 完成了它，但我想要在 div 的打开和关闭时产生动画效果。我想为此使用css。任何帮助都会很棒。

【问题讨论】：

docs.angularjs.org/guide/animations

标签： css angularjs animation css-animations

【解决方案1】：

http://jsfiddle.net/87mwvq7p/1/

<button ng-click="toggle = !toggle">Toggle!</button>

<div class="box on" ng-show="toggle" ng-animate="'box'">On</div>
<div class="box off" ng-hide="toggle" ng-animate="'box'">Off</div>

看看上面的例子..它可能会帮助你

【讨论】：

【解决方案2】：

我明白你的问题。这是解决方案：

HTML 代码：

<div ng-controller="MyCtrl">
  <button ng-click="showDiv = !showDiv">test </button>
  <div ng-class="{ 'vis': showDiv}" >
   hello test
  </div>
</div>

CSS：

.vis {
   opacity:0;
   transition:opacity 0.5s linear;
}

控制器：

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

function MyCtrl($scope) {

}

希望对你有帮助！

【讨论】：