带有 animate.css 的角度 ngShow答案

【问题标题】：angular ngShow with animate.css带有 animate.css 的角度 ngShow
【发布时间】：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 一起使用？

【问题讨论】：

标签： javascript css angularjs animation animate.css

【解决方案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;
}

【讨论】：