微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

AngularJS 是一组用于创建单页Web应用的丰富框架,给构建丰富交互地应用带来了所有需要的功能。其中一项主要的特性就是Angular带来了对动画的支持

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

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

思路:

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

app.js

rush:js;"> var app = angular.module("app",["ngAnimate"]); app.controller("AppCtrl",function(){ this.toggle = true; })

index.html

rush:js;"> <Meta charset="UTF-8"> dist/css/bootstrap.min.css"/>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐