AngularJS中实现显示或隐藏动画效果的方式总结
程序员文章站
2023-08-27 18:44:05
angularjs 是一组用于创建单页web应用的丰富框架,给构建丰富交互地应用带来了所有需要的功能。其中一项主要的特性就是angular带来了对动画的支持。
本篇体验在...
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
var app = angular.module("app",["nganimate"]); app.controller("appctrl", function(){ this.toggle = true; })
index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/> <link rel="stylesheet" href="styles.css"/> </head> <body ng-app="app" ng-controller="appctrl as app"> <button class="btn" ng-click="app.toggle=!app.toggle">toggle animation</button> <div class="toggle" ng-if="app.toggle">some content here</div> <script src="../node_modules/angular/angular.min.js"></script> <script src="../node_modules/angular-animate/angular-animate.min.js"></script> <script src="app.js"></script> </body> </html>
styes.css
.toggle{ -webkit-transition: linear 1s; -moz-transition: linear 1s; -ms-transition: linear 1s; -o-transition: linear 1s; transition: linear 1s; } .toggle.ng-enter{ opacity: 0; } .toggle.ng-enter-active{ opacity: 1; } .toggle.ng-leave{ opacity: 1; } .toggle.ng-leave-active{ opacity: 0; }
通过animation方法实现显示/隐藏动画效果
app.animation("某个类名", function(){ return { leave: function(element, done){ }, enter: function(element, done){ } } })
animation可以在某个类名上加上leave,enter事件,leave和enter函数内部如何实现动画效果呢?可以通过tweenmax.min.js实现。
app1.js
ar app = angular.module("app",["nganimate"]); app.controller("appctrl", function(){ this.toggle = true; }) app.animation(".toggle", function(){ return { leave: function(element, done){ //element.text("nooooo"); tweenmax.to(element, 1, {opacity:0, oncomplete:done}) }, enter: function(element, done){ tweenmax.from(element, 1, {opacity:0, oncomplete:done}) } } })
index1.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../node_modules/topcoat/css/topcoat-desktop-light.min.css"/> </head> <body class="well-lg" ng-app="app" ng-controller="appctrl as app"> <button class="topcoat-button--large--cta" ng-click="app.toggle = !app.toggle">点我</button> <hr/> <div class="topcoat-notification toggle" ng-if="app.toggle">i'm too your to fade</div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/tweenmax.min.js"></script> <script src="../node_modules/angular/angular.min.js"></script> <script src="../node_modules/angular-animate/angular-animate.min.js"></script> <script src="app1.js"></script> </body> </html>
其中,npm install topcoat是一个很好的样式库。
使用direcive的方式实现显示/隐藏动画效果
是否可以在显示/隐藏的div部分加上一个属性,比如hide-me="app.ishidden",hide-me这个属性监控app.ishidden,根据值的变化情况再来决定是否显示。
app3.js
var app=angular.module('app',["nganimate"]); app.controller("appctrl", function(){ this.ishidden = false; this.fadeit = function(){ //tweenmax.to($("#my-badge"), 1, {opacity:0}) this.ishidden = !this.ishidden; } }) app.directive("hideme", function($animate){ return function(scope, element, attrs){ scope.$watch(attrs.hideme, function(newval){ if(newval){ //tweenmax.to(element, 1, {opacity:0}); $animate.addclass(element, "fade"); } else{ $animate.removeclass(element, "fade"); } }) } }) app.animation(".fade", function(){ return { addclass: function(element, classname){ tweenmax.to(element, 1, {opacity:0}); }, removeclass: function(element, classname){ tweenmax.to(element, 1, {opacity:1}); } } })
index3.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/> </head> <body ng-app="app" ng-controller="appctrl as app"> <button id="my-button" class="btn-primary" ng-click="app.fadeit()">click to fade</button> <div id="my-badge" class="badge" hide-me="app.ishidden">fade me</div> <script src="../node_modules/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/tweenmax.min.js"></script> <script src="../node_modules/angular/angular.min.js"></script> <script src="../node_modules/angular-animate/angular-animate.min.js"></script> <script src="app3.js"></script> </body> </html>
以上内容是小编给大家介绍的angularjs中实现显示或隐藏动画效果的方式总结,希望大家喜欢。
下一篇: angularjs表格分页功能详解