ngAnimate プラグインは何をしますか?

ngAnimate プラグインは何をしますか?

ngAnimate プラグインは、その名前が示すように、要素にアニメーションを提供します。

アニメーションを定義するには?

最初のステップはプラグインを導入することです

fa8085f4b8306994268303fc69ca2c852cacc6d41bbb37262a98f745aa00fbf0ba4d4b9f6f2c289440c21e48447709992cacc6d41bbb37262a98f745aa00fbf0

2番目のステップはアプリにこのプラグインを（依存して）導入させることです

<br>

var appH5=angular.module("app",['ngAnimate']);
appH5.controller("myTabCtrl",['$scope',function($scope){
         $scope.isShow=true;
}])7effc392ac7920ed9410c2be10cad254e098f3d94619007683426b67269cbcdbb7a3a36c4230f5cd5e1e2febb8eb2b7a我是要动画的元素16b28748ea4df4d9c2150843fecfba6836cc49f0c466276486e50c850b7e4956添加动画的第一种方式：通过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;
}
//htmlf5008afb7113285acabf919e53d98271我是要动画的元素16b28748ea4df4d9c2150843fecfba68

<br>

<br>

• なぜスタイルを追加するだけでアニメーションを作成できるのでしょうか? <br>要素がページに入ると、Angular はクラス ng-enter と ng-enter-active を要素に順番に追加します。CSS3.0 が要素のトランジションを定義した後、2 つの属性値が追加されることは誰もが知っていると思います。同一の属性の変化は属性値の変更に使用されます。要素がページから削除されるときも同じことが当てはまります。そのため、要素の 4 つのクラスを定義して、これら 4 つの時点のステータスを定義するだけで済み、残りは 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; 
  }
  //htmlad890059b08d8ac81ac81ef61142f84a{{new.title}}16b28748ea4df4d9c2150843fecfba68

要素の作成と削除によって実装される命令はアニメーション化できると言いましたが、それは要素を表示または非表示にするスタイルを変更するコマンド (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/>

アニメーションを追加する 2 番目の方法: 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 中国語 Web サイトの他の関連記事を参照してください。