AngularJS中实现显示或隐藏动画效果的方式总结_AngularJS

本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果。

通过CSS方式实现显示/隐藏动画效果

思路：

→npm install angular-animage
→依赖：var app = angular.module("app",["ngAnimate"]);
→controller中一个变量接收bool值
→界面中提供一个按钮，点击改变bool值
→界面中显示/隐藏的区域提供ng-if和controller中的bool值绑定

app.js

index.html

styes.css

通过animation方法实现显示/隐藏动画效果

animation可以在某个类名上加上leave,enter事件，leave和enter函数内部如何实现动画效果呢？可以通过TweenMax.min.js实现。

app1.js

index1.html

其中，npm install topcoat是一个很好的样式库。

使用direcive的方式实现显示/隐藏动画效果

是否可以在显示/隐藏的div部分加上一个属性，比如hide-me="app.isHidden",hide-me这个属性监控app.isHidden,根据值的变化情况再来决定是否显示。

app3.js

index3.html

以上内容是小编给大家介绍的AngularJS中实现显示或隐藏动画效果的方式总结，希望大家喜欢。