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 相关文章推荐
Open and Print a Word Document
Jun 15 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
javascript每日必学之封装
Feb 23 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
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
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
Yii框架安装简明教程
2020/05/15 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
Opacity.js
2007/01/22 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
KnockoutJS 3.X API 第四章之click绑定
2016/10/10 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
Python中关于使用模块的基础知识
2015/05/24 Python
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
岗位职责范本
2013/11/23 职场文书
办公室前台岗位职责范本
2013/12/10 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
公司端午节活动方案
2014/02/04 职场文书
房屋委托书范本
2014/04/04 职场文书
保护母亲河倡议书
2014/04/14 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
介绍信如何写
2015/01/31 职场文书
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL