집 > 기사 > 웹 프론트엔드 > AngularJS_AngularJS에서 애니메이션 효과 표시 또는 숨기기를 구현하는 방법 요약

AngularJS_AngularJS에서 애니메이션 효과 표시 또는 숨기기를 구현하는 방법 요약

WBOY원래의: 2016-05-16 15:22:341396검색

AngularJS는 단일 페이지 웹 애플리케이션을 만들기 위한 풍부한 프레임워크 세트로, 풍부하고 대화형 애플리케이션을 구축하는 데 필요한 모든 기능을 제공합니다. 주요 기능 중 하나는 Angular가 애니메이션을 지원한다는 것입니다.

이 경험에서는 AngularJS를 사용하여 "표시/숨기기"의 두 상태 사이에 애니메이션 효과를 추가합니다.

CSS를 통한 애니메이션 보이기/숨기기 효과 구현

사물:

→npm install angle-animage
→종속성: var app = angle.module("app",["ngAnimate"]);
→컨트롤러의 변수는 bool 값을 받습니다
→인터페이스에 버튼이 제공됩니다. 클릭하면 bool 값을 변경할 수 있습니다
→인터페이스의 표시/숨겨진 영역은 컨트롤러에서 ng-if 및 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;
}

애니메이션 방식을 통한 애니메이션 보이기/숨기기 효과 구현

 app.animation("某个类名", function(){
 return {
  leave: function(element, done){
  },
  enter: function(element, done){
  }
 }
})

애니메이션은 특정 클래스 이름에 퇴장 및 입장 이벤트를 추가할 수 있습니다. 퇴장 및 입장 기능 내에서 애니메이션 효과를 얻는 방법은 무엇입니까? 이는 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가 좋은 스타일 라이브러리입니다.

지시어를 사용하여 애니메이션 표시/숨기기 효과 얻기

표시/숨겨진 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_javascript 기술을 기반으로 지정된 페이지로 예약된 점프 구현다음 기사：JavaScript_javascript 기술을 기반으로 지정된 페이지로 예약된 점프 구현

AngularJS_AngularJS에서 애니메이션 효과 표시 또는 숨기기를 구현하는 방법 요약

관련 기사