首页 > 编程语言> > javascript-使用animate.css的Angular ngShow

javascript-使用animate.css的Angular ngShow

2019-11-18 19:34:16 作者：互联网

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

我已经阅读了this SO question和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;
}

当我单击“显示为真”(并因此将其隐藏)时,我看到它等待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一起使用？

解决方法:

您必须使用.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" />

—

Working Plunker with full code

标签：angularjs,animation,animate-css,css,javascript
来源： https://codeday.me/bug/20191118/2030656.html