8

我正在学习和试验 Angularjs 和 animate.css。当 ng-show 为真或假时，我正在尝试添加动画。显示和隐藏有效，但动画无效。希望这里有人可以告诉我我做错了什么。

这是笨拙的。

谢谢您的帮助。

4

2 回答 2

10

这是您的代码的略微修改版本，其中 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/

请注意左侧的选项（正文标记，外部资源），必须设置这些选项才能在 jsfiddle 上启动并运行。

于 2014-10-10T15:20:38.643 回答
1

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

于 2014-06-24T18:09:04.860 回答