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 相关文章推荐
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
Javascript继承机制的设计思想分享
Aug 28 Javascript
js 采用delete实现继承示例代码
May 20 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
微信小程序如何使用云开发
May 17 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
vue实现户籍管理系统
May 29 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 Javascript
Vue3.0的优化总结
Oct 16 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 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
摘自启点的main.js
2008/04/20 Javascript
js停止输出代码
2008/07/20 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
python str与repr的区别
2013/03/23 Python
python计算最大优先级队列实例
2013/12/18 Python
python的dict,set,list,tuple应用详解
2014/07/24 Python
跟老齐学Python之集合(set)
2014/09/24 Python
python字典序问题实例
2014/09/26 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
浅谈对yield的初步理解
2017/05/29 Python
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
中间件分为哪几类
2012/03/14 面试题
单位人事专员介绍信
2014/01/11 职场文书
商超业务员岗位职责
2014/03/12 职场文书
水电维修专业推荐信
2014/09/06 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
房屋所有权证明
2015/06/19 职场文书
正规欠条模板
2015/07/03 职场文书
运动会广播稿200字
2015/08/19 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题