带有 animate.css 的角度 ngShow
Posted
技术标签:
【中文标题】带有 animate.css 的角度 ngShow【英文标题】：angular ngShow with animate.css 【发布时间】：2016-08-14 10:03:03 【问题描述】：我想使用 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>
style.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 一起使用？
【问题讨论】：
【参考方案1】：您必须使用.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" />
-
Working Plunker with full code
【讨论】：
如果我使用我发布的第二段代码添加我自己的 css 转换，我就能让它工作。 然而，我在我的问题中说我想使用 animate.css 关键帧动画。fadeIn、zoomOut 等。我将编辑我的问题以尽量减少混乱。对不起。
@MattLishman：请参阅我的答案中的编辑，如果它适合您，请告诉我。我也更新了 Plunker 示例。
啊！在您的 plunker 中，您使用的 animate.css 版本与我不同。使用相同的版本（使用 plunkers 库功能，出于某种原因，我没有将其用于 animate.css ......）我的原始代码有效。所以你回答了我的问题，但方式不同。尽管您的回答对其他人仍然有用，但如果您想将其添加到您的回答中，我可以接受。
@MattLishman 确定我现在正在添加它。我在使用 plunker 库功能时遇到了同样的问题，最终从 cdnjs.com 复制并粘贴了链接
感谢您的帮助，即使是间接的！【参考方案2】：
把你的代码改成这个
<div ng-show="show">
<div class="show" ng-click="show = !show">Show</div>
</div>
<div ng-show="!show">
<div class="hide" ng-click="show = !show" >Hide</div>
</div>
.show.ng-hide
opacity: 0;
transition: all linear 0.5s;
.show
transition: all linear 0.5s;
opacity:1;
【讨论】：
以上是关于带有 animate.css 的角度 ngShow的主要内容，如果未能解决你的问题，请参考以下文章