角ngShow与animate.css
我想动画一个元素的显示和隐藏使用animate.css和角。
我已经阅读了这个问题和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;
}当点击"show“(为了隐藏它)时，我看到它在隐藏之前等待了5秒，所以发生了一些事情，但是它不会消失。
如果我将它添加到css中，我可以让它工作：
.show.ng-hide-add {
opacity: 1.0;
display: block !important;
transition: opacity 1s;
}
.show.ng-hide-add-active {
opacity: 0;
}然而，，我不想这样做，。我想使用动画.关键帧 (我认为这是正确的术语，我的css术语不是很棒)，比如fadeIn，fadeOut等等。
柱塞来展示我所看到的。
我做错了什么？如何使用动画. use的带有角的ngAnimate的关键帧动画
回答 2
Stack Overflow用户
发布于 2016-04-21 10:04:34
您必须使用.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;
}重要注意:为了使其在柱塞中正确工作，我没有使用柱塞外部库查找器建议的3.2.0版本，但我手动链接了3.5.1版本，在html中添加了以下代码
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.css" />-
Stack Overflow用户
发布于 2016-04-21 09:52:57
将您的代码更改为
<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;
}https://stackoverflow.com/questions/36765603
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号