使用animate.css进行角度ngShow

Question

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

我已经阅读了这个问题和ngShow和ngAnimate的角度文档，但仍然无法使其工作。

我在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的关键帧（我认为这是正确的术语，我的css术语并不精彩），如fadeIn ， fadeOut等。

plunker来展示我所看到的。

我究竟做错了什么？ 如何在angular的ngAnimate使用animate.css的关键帧动画？

Answer 1

您必须使用.ng-hide类，因为它是在ng-show的条件为false时分配的类，或者在ng-hide为true。

根据你可以编辑你的代码，如下所示：

.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" />

-

使用完整代码工作Plunker

Answer 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

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-04-21 10:04:34

解决方案2
1 2016-04-21 09:52:57

使用animate.css进行角度ngShow

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-04-21 10:04:34

解决方案2 1 2016-04-21 09:52:57

解决方案1
2 已采纳 2016-04-21 10:04:34

解决方案2
1 2016-04-21 09:52:57