ngAnimate 플러그인의 기능은 무엇인가요?-H5 튜토리얼-php.cn

ngAnimate 플러그인의 기능은 무엇인가요?

零下一度

풀어 주다： 2017-06-30 15:27:42

원래의

1567명이 탐색했습니다.

ngAnimate 플러그인의 기능은 무엇인가요?

ngAnimate 플러그인은 이름에서 알 수 있듯이 요소에 애니메이션을 제공합니다.

애니메이션을 어떻게 정의하나요?

첫 번째 단계는 플러그인을 소개하는 것입니다

<script src="//cdn.bootcss.com/angular.js/1.3.20/angular.js?1.1.11"></script><script src="//cdn.bootcss.com/angular.js/1.3.20/angular-animate.min.js?1.1.11"></script>

로그인 후 복사

두 번째 단계는 앱이 이 플러그인을 소개(의존)하도록 하는 것입니다

<br>

로그인 후 복사

var appH5=angular.module("app",['ngAnimate']);
appH5.controller("myTabCtrl",['$scope',function($scope){
         $scope.isShow=true;
}])<body ng-controller="myTabCtrl"><input type="checkbox"  ng-model="isShow" /><div class="new-item" ng-if="isShow">我是要动画的元素</div></body>添加动画的第一种方式：通过css3.0的方式

样式定义示例
.new-item{
  padding: 10px;
  border-bottom: 1px solid #ededed;
  font-size: 1.5rem;
  position: relative;
  transition:all 0.5s;
}
/*元素进入页面初始状态*/
.new-item.ng-enter{
  top: 10px;
}
/*进入页面动画后的最终状态*/
.new-item.ng-enter-active{
  top: 0px;
}
/*元素移出页面初始状态*/
.new-item.ng-leave{
  opacity:1;
}
/*移出页面动画后的最终状态*/
.new-item.ng-leave-active{
  opacity:0;
}
//html<div class="new-item">我是要动画的元素</div>

로그인 후 복사

<br>

로그인 후 복사

<br>

로그인 후 복사

왜 그냥 스타일만 추가해서 애니메이션을 제작하나요? <br>요소가 페이지에 들어가면 Angular는 요소에 ng-enter 및 ng-enter-active 클래스를 순서대로 추가합니다. CSS3.0이 요소에 대한 전환을 정의한 후 속성 값은 2입니다. 동일한 속성이 변경됩니다. 전환 애니메이션은 속성 값을 변경하는 데 사용됩니다. 요소가 페이지에서 제거될 때도 마찬가지이므로 이 네 가지 시점의 상태를 정의하려면 요소의 네 가지 클래스만 정의하면 되고 나머지는 Angular가 수행하게 됩니다.
이러한 방식으로 애니메이션 정의를 지원하는 명령은 무엇입니까? <br>ng-if, ng-view, ng-repeat, ng-include, ng-switch<br>이 지침은 새 노드를 생성하고 노드를 제거하여 요소를 표시하고 숨기는 데 사용됩니다

ng-repeat 포인트

.new-item{
  padding: 10px;
  border-bottom: 1px solid #ededed;
  font-size: 1.5rem;
  position: relative;
  transition:all 0.5s;
}
.new-item.ng-enter{
  top: 10px;
}
.new-item.ng-enter-active{
  top: 0px;
}
.new-item.ng-enter-stagger{/*ng-repeat提供了这个样式，来实现每一个item条目的依次执行某个动画 */
  animation-delay:100ms;
  -webkit-animation-delay:100ms; 
}
.new-item.ng-leave{
  opacity:1;
}
.new-item.ng-leave-active{
  opacity:1;
}
.new-item.ng-leave-stagger{
  animation-delay:100ms;
  -webkit-animation-delay:100ms; 
}
//html<div class="new-item" ng-repeat="new in news">{{new.title}}</div>

로그인 후 복사

요소를 생성하고 삭제하여 구현한 명령을 애니메이션으로 구현할 수 있다고만 말씀드렸는데, 그렇다면 단순히 요소를 표시하거나 숨기도록 스타일을 변경하는 명령일 뿐입니다(ng-show ng-hide ng-class). 애니메이션화될까?

로그인 후 복사

/*元素隐藏初始状态*/
.new-item.ng-hide-add{
    opacity:1;
}
/*隐藏操作动画后的最终状态*/
.new-item.ng-hide-add-active{
    opacity:0;
}
/*元素显示初始状态*/
.new-item.ng-hide-remove{
    top: 10px;
}
/*显示操作动画后的最终状态*/
.new-item.ng-hide-remove-active{
    top: 0px;
}

로그인 후 복사

 <br/>

로그인 후 복사

애니메이션을 추가하는 두 번째 방법: js를 통해

//ng-if、ng-view、ng-repeat、ng-include、ng-switch 指令
appH5.animation(".new-item",function(){
    return {
        leave:function(element,done){
            //第一个参数是运动的元素，第二个参数是动画完成后的回调，必须调用的，不调用则指令功能不会执行
            $(element).animate({width:0,height:0},1000,done);//借助jQuery
        },
        enter:function(element,done){
            $(element).css({width:100,height:100});//借助jQuery
            $(element).animate({width:100,height:100},1000,done)//借助jQuery
        }
    }
});

//ng-show ng-hide ng-class 指令
appH5.animation(".new-item",function(){
    return {
        addClass:function(element,sClass,done){
            //第一个参数是运动的元素
            //第二个参数是元素的样式-->一般用不上
            //第三个参数是动画完成后的回调，必须调用的，不调用则指令功能不会执行
            $(element).animate({width:0,height:0},1000,done)
        },
        removeClass:function(element,sClass,done){
            $(element).css({width:100,height:100});
            $(element).animate({width:100,height:100},1000,done)
        }
    }
});

로그인 후 복사

위 내용은 ngAnimate 플러그인의 기능은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!