Animate.css和Angularjs ng-hide

Question

我正在学习和实验Angularjs和animate.css。当ng-show为true或false时，我会尝试添加动画。显示和隐藏工作，但不是动画。希望这里的人能告诉我我做错了什么。

这是plunk。

谢谢你的帮助。

Answer 1

下面是使用ng-show和animate.css协同工作的代码的一个稍微修改过的版本。

HTML

<div ng-controller="controller">
  <button ng-click="showme = !showme">Show or Hide</button>
  <div ng-show="showme" class="boxme">
    <h2>Box to Show and Hide</h2>
    <p>Show and hide this box using animate.css the angularway!</p>
  </div>
</div>

JavaScript

(function() {
    var app = angular.module("theapp", ['ngAnimate']);
    var controller = function($scope){
        $scope.showme = false;
    };
    app.controller("controller", controller);
}());

CSS

.boxme.ng-hide-add {
    -webkit-animation: fadeOutLeftBig 0.4s;
    display: block!important;
}
.boxme.ng-hide-remove {
    -webkit-animation: fadeInLeftBig 0.4s;
}

http://jsfiddle.net/h58wsxcw/

请注意左侧的选项(body标签、外部资源)，这些选项必须进行设置才能在jsfiddle上运行。

Answer 2

我找到了一个似乎适用于ngAnimate和animate.css的解决方案，我将版本升级到了1.2.17，使用这种方法似乎仍然有效……不确定为什么我不能在plunkr中复制：http://jsbin.com/usaruce/2677/edit?html,css,js,output