我想使用 animate.css 为元素的显示和隐藏设置动画。和 Angular 。
我已阅读 this SO question以及 ngShow 和 ngAnimate 的 Angular 文档，但仍然无法正常工作。
我已经在 plunker 上尝试了以下设置，但它不起作用。
app.js
var app = angular.module('plunker', ['ngAnimate']);
app.controller('MainCtrl', function($scope) {
$scope.show = true;
});
index.html
<body ng-controller="MainCtrl">
<p>Show: {{show}}</p>
<div class="show" ng-click="show = !show" ng-show="show === true">Show is true</div>
<div class="hide" ng-click="show = !show" ng-show="show === false">Show is false</div>
</body>
样式.css
.show.ng-hide-add {
animation: fadeOut 5s linear;
}
当点击“显示为真”(并因此隐藏它)时，我看到它在隐藏之前等待 5 秒，所以发生了一些事情，但它并没有淡出。
如果我将它添加到 css 中，我可以让它工作:
.show.ng-hide-add {
opacity: 1.0;
display: block !important;
transition: opacity 1s;
}
.show.ng-hide-add-active {
opacity: 0;
}
但是，我不想这样做。我想用 animate.css's keyframes (我认为这是正确的术语，我的 css 行话并不出色)例如 fadeIn、fadeOut 等。
plunker展示我所看到的。
我做错了什么？如何将 animate.css 的关键帧动画与 Angular 的 ngAnimate 一起使用？
最佳答案
你必须使用 .ng-hide 类，因为一旦 ng-show 中的条件为假，或者在 ng 中，它就是被分配的类-hide 为真。
据此，您可以像这样编辑代码:
.show.ng-hide,
.hide.ng-hide{
opacity: 0;
transition: all linear 0.5s;
}
.show,
.hide{
transition: all linear 0.5s;
opacity:1;
}
<p>Show: {{show}}</p>
<div class="show" ng-click="show = !show" ng-show="show">Show</div>
<div class="hide" ng-click="show = !show" ng-hide="show">Hide</div>
-
编辑:
如果您想使用 animate.css 类，例如 .fadeIn 和 .fadeOut，您必须在您的 css 中分配相应的关键帧。
因此您必须使用以下 CSS:
.show.ng-hide,
.hide.ng-hide{
animation-name:fadeOut;
animation-duration: .5s;
}
.show{
animation-name:fadeIn;
animation-duration: .5s;
}
重要提示: 为了使其在 plunker 中正常工作，我没有使用 plunker 外部库查找器建议的 3.2.0 版本，但我手动链接了 3.5.1 版本，在 html 中添加了以下代码
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.css" />
-
关于javascript - angular ngShow 与 animate.css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36765603/