bob体育官方平台
AngularJS中贯彻展现或掩饰动漫作用的3种办法

AngularJS 是豆蔻梢头组用于创建单页Web应用的充裕框架,给创设丰硕交互作用地使用带来了具备要求的效率。个中蓬蓬勃勃项首要的特色就是Angular带给了对动漫片的扶持。

 

本篇体验在AngularJS中贯彻在"显示/隐蔽"那2种意况切换间增添动漫成效。

本篇体验在AngularJS中落到实处在"展现/隐敝"那2种意况切换间增添动画功效。

因此CSS方式完结显示/遮盖动漫功能

透过CSS情势完结呈现/隐蔽动漫成效

→npm install angular-animage→信赖:var app = angular.module;→controller中叁个变量采用bool值→分界面中提供三个按钮,点击改动bool值→分界面中展现/隐敝的区域提供ng-if和controller中的bool值绑定

思路:

app.js

→npm install angular-animage
→依赖:var app = angular.module("app",["ngAnimate"]);
→controller中三个变量采取bool值
→界面中提供二个按键,点击退换bool值
→界面中呈现/隐敝的区域提供ng-if和controller中的bool值绑定

var app = angular.module;app.controller{ this.toggle = true;})

app.js

index.html

var app = angular.module("app",["ngAnimate"]);

app.controller("AppCtrl", function(){
    this.toggle = true;
})
   Toggle AnimationSome content here 

 

styes.css

index.html

 .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;} 
<!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>

通过animation方法完毕呈现/隐敝动漫功能

 

 app.animation{ return { leave: function{ }, enter: function 

styes.css

animation可以在有些类名上充裕leave,enter事件,leave和enter函数内部怎么样兑现动漫效果呢?能够透过TweenMax.min.js完结。

.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;
}

app1.js

 

ar app = angular.module;app.controller{ this.toggle = true;})app.animation{ return { leave: function{ //element.text; TweenMax.to(element, 1, {opacity:0, onComplete:done}) }, enter: function{ TweenMax.from(element, 1, {opacity:0, onComplete:done}) } }}) 

经过animation方法完结呈现/隐蔽动漫效率

index1.html

 

  点我I'm too your to fade 
app.animation("某个类名", function(){
    return {
        leave: function(element, done){

        },
        enter: function(element, done){

        }
    }
})

中间,npm install topcoat是二个很好的样式库。

 

上一篇:没有了 下一篇:jQuery语法小结_jquery_脚本之家
返回顶部