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


Posted in Javascript onDecember 31, 2015

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中实现显示或隐藏动画效果的方式总结,希望大家喜欢。

Javascript 相关文章推荐
jquery控制listbox中项的移动并排序
Nov 12 Javascript
jQuery版Tab标签切换
Mar 16 Javascript
字符串反转_JavaScript
Apr 28 Javascript
js仿淘宝和百度文库的评分功能
May 15 Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 Javascript
js使用highlight.js高亮你的代码
Aug 18 Javascript
vue实现密码显示隐藏切换功能
Feb 23 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 Javascript
Vue 数据绑定的原理分析
Nov 16 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 Javascript
javascript数据类型验证方法
Dec 31 #Javascript
jQuery操作基本控件方法实例分析
Dec 31 #Javascript
javascript图片延迟加载实现方法及思路
Dec 31 #Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 #Javascript
详解javascript高级定时器
Dec 31 #Javascript
jQuery动画效果相关方法实例分析
Dec 31 #Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 #Javascript
You might like
GD输出汉字的函数的分析
2006/10/09 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
vue构建动态表单的方法示例
2018/09/22 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
Python实现SVN的目录周期性备份实例
2015/07/17 Python
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
Python csv模块使用方法代码实例
2019/08/29 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
三维科技面试题
2013/07/27 面试题
大学生求职中的自我评价
2013/10/01 职场文书
医学院毕业生自荐信
2013/11/08 职场文书
医药专业应届毕业生求职信范文
2014/01/01 职场文书
小学生演讲稿
2014/01/12 职场文书
英语生日邀请函
2014/01/23 职场文书
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
高中班主任评语
2014/12/30 职场文书
英语教师个人总结
2015/02/09 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
高一军训感想
2015/08/07 职场文书