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 相关文章推荐
修改发贴的编辑功能
Mar 07 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 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加密解密的代码
2007/07/16 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
python实时分析日志的一个小脚本分享
2017/05/07 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
使用python存储网页上的图片实例
2018/05/22 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
物业总经理岗位职责
2014/02/28 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
党支部综合考察意见
2015/06/01 职场文书
中学教师读书笔记
2015/07/01 职场文书
部门主管竞聘书
2015/09/15 职场文书
pandas数值排序的实现实例
2021/07/25 Python
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers