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 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
js实现索引图片切换效果
Nov 21 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
vue实现动态数据绑定
Apr 28 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
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
php文件夹的创建与删除方法
2015/01/24 PHP
linux下php上传文件注意事项
2016/06/11 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
体育老师的教学自我评价分享
2013/11/19 职场文书
农村婚礼证婚词
2014/01/08 职场文书
企业内部培训方案
2014/02/04 职场文书
大学感恩节活动总结
2015/05/05 职场文书
办公经费申请报告
2015/05/15 职场文书
银行求职信怎么写
2019/06/20 职场文书
Javascript设计模式之原型模式详细
2021/10/05 Javascript
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技