angular ngShow 与 animate.css

Question

我想使用 animate.css 和 angular 动画显示和隐藏元素。

我已阅读以及 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;
}

当点击 "show is true"（并因此隐藏它）时，我看到它在隐藏之前等待 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 一起使用？

Answer 1

将您的代码更改为此

<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;
}

Answer 2

您必须使用 .ng-hide class，因为一旦 ng-show 或 ng-hide 中的条件为假，就会分配 class是真的。

据此，您可以像这样编辑代码：

.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 classes，例如 .fadeIn 和 .fadeOut，您必须在 [=45= 中分配相应的关键帧].

所以你必须使用下面的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 [=20 中添加了以下代码=]

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.css" />

-

Working Plunker with full code

angular ngShow 与 animate.css

angular ngShow with animate.css

javascript

css

animation

angularjs

animate.css