angular ngShow with animate.css

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

我已阅读this SO question和ngShow和ngAnimate的角度文档，但仍无法使其正常工作。

我已经尝试了下面的安装程序，但它不起作用。

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展现我所看到的。

我在做什么错？我如何使用角度为ngAnimate的animate.css的关键帧动画？

来源

2016-04-21 Matt Lishman

你必须使用.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正常工作，我没有使用过的版本3.2.0由plunker外部建议图书馆取景器，但我手动链接的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

来源

2016-04-21 10:04:34 fbid

我能够得到它的工作，如果我使用我张贴的第二段代码添加我自己的CSS转换。 *然而*，我在我的问题中说过我想使用animate.css关键帧动画。 'fadeIn'，'zoomOut'等。我将编辑我的问题，尝试使它不那么混乱。抱歉。 –

@MattLishman：查看我答案中的编辑，并告诉我它是否适合你。我也更新了Plunker的例子。 – fbid

啊！在你的plunker中，你使用了不同于我的animate.css版本。使用相同的版本（使用plunkers库功能，由于某种原因，我没有将它用于animate.css ...），我的原始代码有效。所以你以不同的方式回答了我的问题。虽然你的答案对其他人仍然有用，但如果你想将其添加到你的答案中，我可以接受它。 –

你的代码改成这样

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

来源

2016-04-21 09:52:57 byteC0de

angular ngShow with animate.css

回答

相关问题