动画angularjs不起作用答案

【问题标题】：Animation angularjs not working动画angularjs不起作用
【发布时间】：2015-07-22 00:44:55
【问题描述】：

我正在尝试在点击时为 div 设置动画。当我点击一个链接时，应该会出现一个 div，而我点击的那个 div 会消失。我在这里做了一个例子：

http://plnkr.co/edit/703244UJ0hcG9GjkOjOz?p=preview

顺便说一下，这是一些代码：

 <a class="" ng-click="showDetails" ng-if="!showDetails">
        Expand 
    </a>


  <div class="animate-if" ng-if="showDetails">

  Details!!
  <a style="cursor:pointer;" ng-click="!showDetails">
      Close
  </a>
  </div>

  {{showDetails}}
</body>

角度

var app = angular.module('plunker', ['ngAnimate']);

app.controller('MainCtrl', function($scope, $window) {
 showDetails = false;

});

css:

.animate-if.ng-enter, .animate-if.ng-leave {
  -webkit-transition: 1s linear all;
  -moz-transition: 1s linear all;
  -ms-transition: 1s linear all;
  -o-transition: 1s linear all;
  transition: 1s linear all;
}
.animate-if.ng-enter {
  max-height: 0;
  opacity: 0;
}
.animate-if.ng-enter.ng-enter-active {
  max-height: 999px;
  opacity:1;
}
.animate-if.ng-leave {
  max-height: 999px;
  opacity:1;
}
.animate-if.ng-leave.ng-leave-active {
  max-height: 0;
  opacity:1;
}

所以，当我点击“展开”时，应该会出现带有类的 div：animate-if 并消失这个：

<a class="" ng-click="showDetails" ng-if="!showDetails">
        Expand 
    </a>

然后，当我单击“关闭”时，div : animate-if 应该会消失并再次出现“展开”链接。当然使用动画。实际上不工作。不出现或消失。

【问题讨论】：

你没有忘记包含 ng-animate.js 吗？这可能是一个愚蠢的问题，但我有时会忘记它..
不，ng-animate.js 已经包含在内。我确定

标签： javascript jquery html css angularjs

【解决方案1】：

您需要一个切换函数，该函数将在单击expand div 时切换showDetail 变量的值。

js：

var app = angular.module('plunker', ['ngAnimate']);

app.controller('MainCtrl', function($scope, $window) {
 $scope.showDetails = false;
 $scope.toggleDetails =function (){
   $scope.showDetails = !$scope.showDetails; 

 }
});

html：

<body ng-controller="MainCtrl">
   <a class="" ng-if="!showDetails" ng-click="toggleDetails()">
        Expand 
    </a>
  <div class="animate-if" ng-if="showDetails">
    Details!!
  <a style="cursor:pointer;"  ng-click="toggleDetails()">
      Close
  </a>
  </div>
   {{showDetails}}
</body>

demo

【讨论】：

好的，现在可以使用该功能，但请参见此处的问题；我在展开链接中添加了 ng-if="!showDetails"。因此，当我单击它时，它会消失并以正确的方式显示 div。但是当我单击“关闭”时，“展开”字会出现在“关闭”的 div 消失之前。这就是我的意思：plnkr.co/edit/wCWoLxYrId38G2PDLPu1?p=preview跨度>
@End.Game 我被错误地从扩展 div 中删除了 ng-if 指令。为你高兴.. :)
有没有办法检测动画何时结束？
@End.Game 在这里查看sitepoint.com/css3-animation-javascript-event-handlers
是的，我尝试检查您发布的链接，但没有成功。您知道在我的情况下如何使用它吗？