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 getJSON 处理json数据的代码
Jul 26 Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
jquery获取节点名称
Apr 26 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
electron实现静默打印的示例代码
Aug 12 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
前端深入理解Typescript泛型概念
Mar 09 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
php中文字母数字验证码实现代码
2008/04/25 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
js 获取Listbox选择的值的代码
2010/04/15 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
javascript基础知识讲解
2017/01/11 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
python的即时标记项目练习笔记
2014/09/18 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
python操作文件的参数整理
2019/06/11 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
python 画图 图例自由定义方式
2020/04/17 Python
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
存储过程和sql语句的优缺点
2014/07/02 面试题
大学生职业生涯规划范文
2014/01/08 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
交通安全寄语大全
2014/04/08 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
单位工作证明范文
2014/09/14 职场文书
婚宴新郎致辞
2015/07/28 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫
MySQL三种方式实现递归查询
2022/04/18 MySQL
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript