Question

我想使用animate.css和angular。

为元素的显示和隐藏设置动画

我已阅读this SO question以及<form action="thankyou.html" method="POST" role="form" class="payment_form"> ....... </form>和ngShow的角度文档，但仍无法使其生效。

我在plunker上尝试了以下设置，但它不起作用。

app.js

ngAnimate

的index.html

var app = angular.module('plunker', ['ngAnimate']);
app.controller('MainCtrl', function($scope) {
  $scope.show = true;
});

的style.css

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

点击＆＃34;显示为真＆＃34; （并因此隐藏它）我看到它在隐藏之前等待5秒，所以发生了，但它并没有淡出。

如果我将它添加到css中，我可以使它工作：

.show.ng-hide-add {
   animation: fadeOut 5s linear;
}

但是，我不想这样做。我想使用animate.css's keyframes（我认为这是正确的术语，我的css术语并不精彩），例如.show.ng-hide-add { opacity: 1.0; display: block !important; transition: opacity 1s; } .show.ng-hide-add-active { opacity: 0; }，fadeIn等。

plunker显示我所看到的内容。

我做错了什么？如何在角度为fadeOut的情况下使用animate.css的关键帧动画？

Answer 1

您必须使用.ng-hide类，因为它是ng-show中的条件为false或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

Answer 2

将您的代码更改为此

php composer show -i

使用animate.css进行角度ngShow

2 个答案: