【angularjs动画效果】AngularJS中实现显示或隐藏动画效果的方式总结-angularjs显示动画-angularjs隐藏动画

时间:2016-02-17 21:54 来源: 我爱IT技术网作者:佚名

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【AngularJS中实现显示或隐藏动画效果的方式总结】，下面是详细的讲解！

AngularJS中实现显示或隐藏动画效果的方式总结

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="http://www.jb51.net/article/../node_modules/bootstrap/dist/css/bootstrap.min.css"/>
 <link rel="stylesheet" href="http://www.jb51.net/article/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="http://www.jb51.net/article/../node_modules/angular/angular.min.js"></script>
<script src="http://www.jb51.net/article/../node_modules/angular-animate/angular-animate.min.js"></script>
<script src="http://www.jb51.net/article/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="http://www.jb51.net/article/../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="http://www.jb51.net/article/../node_modules/angular/angular.min.js"></script>
<script src="http://www.jb51.net/article/../node_modules/angular-animate/angular-animate.min.js"></script>
<script src="http://www.jb51.net/article/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="http://www.jb51.net/article/../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="http://www.jb51.net/article/../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="http://www.jb51.net/article/../node_modules/angular/angular.min.js"></script>
<script src="http://www.jb51.net/article/../node_modules/angular-animate/angular-animate.min.js"></script>
<script src="http://www.jb51.net/article/app3.js"></script>
</body>
</html>

以上内容是小编给大家介绍的AngularJS中实现显示或隐藏动画效果的方式总结，希望大家喜欢。

关于AngularJS中实现显示或隐藏动画效果的方式总结的用户互动如下：

　　相关问题：利用angularjs 如何编写隐藏和显示密码

　　答：是要这个么？ >>详细

　　相关问题：angularjs 显示和隐藏密码

　　答：添加在两个密码框体监视器，在监视器里面写是否一致的逻辑，即可 $scope.$watch('passw1',function() {$scope.test();}); $scope.$watch('passw2',function() {$scope.test();}); $scope.test = function() { if ($scope.passw1 !== $scope.pass... >>详细

　　相关问题：如和在Angularjs中实现<select><option>下拉选中时...

　　答：testvar myApp = angular.module("myApp", []);myApp.controller("testCtrl", function($scope){$scope.data = [{id:1,value:'hello'},{id:2,value:'bye'},{id:3,value:'hmmmm'}];//$scope.selectValue = $scope.data[0].id;}); hello bye hmmmm... >>详细

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

【angularjs动画效果】AngularJS中实现显示或隐藏动画效果的方式总结-angularjs显示动画-angularjs隐藏动画

AngularJS中实现显示或隐藏动画效果的方式总结

关于AngularJS中实现显示或隐藏动画效果的方式总结的用户互动如下：

第一章 JavaScript （基础）

第二章 JavaScript（高级）