AngularJS中实现显示或隐藏动画效果的3种方式
本篇体验在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:;
}
.toggle.ng-enter-active{
opacity:;
}
.toggle.ng-leave{
opacity:;
}
.toggle.ng-leave-active{
opacity:;
}
通过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中实现显示或隐藏动画效果的3种方式的更多相关文章
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态
查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
- android view控件的显示和隐藏动画效果
// 显示动画 mShowAction = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO ...
- 教你三种jQuery框架实现元素显示及隐藏动画方式
摘要:在jQuery框架中对元素对象进行显示和隐藏有三种方式,分别是"默认方式显示和隐藏"."滑动方式显示和隐藏"."淡入淡出显示和隐藏". ...
- HTML5 动画效果的多种实现方式
HTML5 动画效果的多种实现方式 1. CSS3 transform + transition https://www.w3.org/TR/css-transforms-1/ https://ww ...
- ps | grep app 命令不显示grep app本身进程的几种方式
ps | grep app 命令不显示grep app本身进程的几种方式 使用ps命令查询进程,常常我们不想打印出"ps | grep app"这个当前进程,比如如下: [root ...
- js中 json对象与json字符串相互转换的几种方式
以下总结js中 json对象与json字符串相互转换的几种方式: 一.JSON对象转化为JSON字符串 1.使用JSON.stringify()方法进行转换 该方法不支持较老版本的IE浏览器,比如:i ...
- jqury+animation+setTimeOut实现渐变显示与隐藏动画
初始效果 实现效果 1,编写HTMl结构代码 <div class="box"> <i class="icon"></i> ...
- Web开发中的显示与隐藏
大多数编程语言,在平开发过程中,都是会遇到一些特殊的场景,需要实现显示或者隐藏来达到我们想要的效果:然而实现的方式有多种,今天就写一下,希望可以帮到各位. 小编我学习前端1年了,特意写写博客来回顾一下 ...
- css中实现显示和隐藏（转）
CSS中的display和visibility 在平时的开发过程中,总是会遇到一些文字在特定的场景下显示或者隐藏来达到我们想要的效果,css中display和visibility语法,他们都 ...
随机推荐
- 【ARTS】01_05_左耳听风-20181210~1216
ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...
- 如何将java项目转化为web项目
1.修改工程文件 找到项目工作空间目录,打开.project文件,找到:<natures> </natures>代码段,在代码段中加入如下内容并保存:<nature> ...
- System.Web.Routing入门及进阶 上篇
System.Web.Routing已经作为一个程序集包含在.net3.5sp1中发布了.虽然我们并没有在3.5sp1中发现Asp.net Mvc的踪迹,但是亦以感觉到它离我们不远了. System. ...
- Linux：安装mysql
#install mysql$ rpm -ivh MySQL-client-5.5.28-1.rhel5.x86_64.rpm --nodeps$ rpm -ivh MySQL-server-5.5. ...
- 查询orcale运行的SQL语句记录
select c.* from V$SQL c where c.MODULE='ukhis.exe' order by last_active_time desc
- spring-dao.xml 模板
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- .NetCore源码阅读笔记系列之Security （一） Authentication & AddCookie
如果你使用过.NetCore开发过程序,你会很清楚,在其中我们经常会用到一些如下的代码 services.AddAuthentication(options => { options.Defau ...
- K8s中，tomcat的一部分jvm参数，如何通过env环境变量传递？
这两天解决的一个需求: 如果用户没有在deployment中设置env参数,则tomcat默认使用1G左右的内存: 如果用户在deployment中提供了jvm参数,则tomcat将这部分的参数,覆盖 ...
- weblogic在64位windows的设置
最近遇到一些问题,需要调整weblogic的内存用于做压力测试,weblogic默认的内存是远远不能满足当前测试需求.由于服务器是64位8G的内存,但是在服务器上安装的jdk和weblogic都是32 ...
- P1164 小A点菜 洛谷
题目背景 uim神犇拿到了uoi的ra(镭牌)后,立刻拉着基友小A到了一家……餐馆,很低端的那种. uim指着墙上的价目表(太低级了没有菜单),说:“随便点”. 题目描述 不过uim由于买了一些辅(e ...