网络编程

AngularJS中实现显示或隐藏动画效果的方式总结
网络编程 2025/6/29 佚名
3 2

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="/UploadFiles/2021-04-02/angular.min.js">


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="/UploadFiles/2021-04-02/TweenMax.min.js">


其中，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="/UploadFiles/2021-04-02/jquery.min.js">


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


                                

                                

                                     

                                

                                    标签：
                                        
angularjs动画效果,angularjs显示动画,angularjs隐藏动画
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com