angular_AngularJS にアニメーション効果を追加するときに発生する問題の概要

「アニメーション」の追加は、ユーザーにアプリケーションの動作を認識させる効果的な方法です。 「リスト」はアプリケーションで最も一般的に使用されるインターフェイス フォームであり、行の追加、行の削除、行の移動などの操作が頻繁に行われます。追加操作は非常に単純で、削除する場合は大きい値から小さい値に移動し、追加する場合は小さい値から大きい値に移動します。これは、最初に削除してから追加することを意味します。複雑な感じはなく、CSS トランジションを使用して実行する必要があります。しかし、実際には対処すべき問題がたくさんあることがわかりました。一つずつ見ていきましょう。

簡単なテストをいくつか行ってみましょう

1. 初期バージョン

<div class='list'>
  <div class='row-1'>row-1</div>
  <div class='row-2'>row-2</div>
</div>

.list{margin:20px;background:#eee;font-size:18px;color:white;}
.row-1{background:green;overflow:hidden;padding:15px;}
.row-2{background:blue;padding:15px;}
/*demo1*/
.demo-1 .remove{-webkit-transition: height 3s linear;}
.demo-1 .remove.active{height:0;}

var ele = document.querySelector('.demo-1 .row-1');
ele.classList.add('remove');
ele.classList.add('active');

アイデアは非常に簡単です。「remove」クラスを追加してアニメーションの効果を設定し、「active」を追加して CSS 属性を変更してアニメーションをアクティブにします。

結果が期待していたものと異なります。問題は 2 つあります。1. アニメーションが実行されません。2. row-1 が消えません。なぜ？まず、CSS トランジションは auto 属性に作用できません。row-1 には元々高さが設定されていないため、既存の高さから 0 へのアニメーションは生成されません。次に、height=0 はコンテンツ領域を 0 に設定するだけで、パディングは変更されていないため、row-1 は依然として 30 ピクセルのスペースを占有します。

2. 固定の高さを指定し、パディングにアニメーションを追加します

CSS を調整

/*demo2*/
.demo-2 .row-1{height:48px;}
.demo-2 .remove{-webkit-transition: height 3s linear, padding-top 3s linear;}
.demo-2 .row-1.remove.active{height:0;padding-top:0;padding-bottom:0;}

今回の効果は正しく、row-1 が 48px から 0 になり、それに応じてパディングも変更されます。

3. 他に方法はありますか？高さを指定する必要がありますか?変換は大丈夫ですか?

CSS を変更する

/*demo3*/
.demo-3 .remove{-webkit-transition: -webkit-transform 3s linear,padding 0s linear 3s;}
.demo-3 .row-1.remove.active{-webkit-transform-origin:0 0;-webkit-transform:scaleY(0);}

高さを設定しなくても、トランスフォームによるアニメーションを行うのには問題ありません。問題は、行 1 がまだ元の場所にあり、スペースを占有しており、行 2 が上に移動していないことです。これにより、アニメーションの実行後 (高さの設定の 2 番目の例を含む)、行 1 が削除されず、非表示になります。

4. アニメーション実行後の要素のクリアの問題を解決します

CSS を変更する

コードをコピーします コードは次のとおりです:

.demo-4 .remove{-webkit-transition: 高さ 3 秒の線形、パディング 3 秒の線形、不透明度 3 秒の線形、色 .5 秒の線形;}
.demo-4 .row-1.remove.active{padding-top:0;padding-bottom:0;color:rgba(0,0,0,0);opacity:0;}

JS を変更する

var ele, l;
ele = document.querySelector('.demo-4 .row-1');
l = ele.addEventListener('webkitTransitionEnd', function(evt){
  if (evt.propertyName === 'height') {
    ele.style.display = 'none';   
    ele.style.height = '';
    ele.removeEventListener('webkitTransitionEnd', l, false);
  }
}, false);
ele.style.height = ele.offsetHeight + 'px';
ele.classList.add('remove');
$timeout(function(){
  ele.classList.add('active');
  ele.style.height = '0px';
});

今回の効果は良好です。注意すべき点がいくつかあります。 1. アニメーションの終了は、transitionEnd イベントを登録することでキャプチャできます。 2. 複数のアニメーションを同時に実行できます。イベントの「propertyName」からどのプロパティであるかを知ることができます。アニメーションは終了です。

5.velocity.jsも使ってみました

CSS を設定する必要はありません
JSコード

var ele = document.querySelector('.demo-5 .row-1');
Velocity(ele, 'slideUp', { duration: 1000 });

実行プロセスを見て、高さとパディングも変更しました。ただし、速度は requestAnimationFrame 関数を使用します。比較的単純なアニメーションであれば他のライブラリを導入する必要はなく、直接書いても実行効果はほぼ同じになると思います。

6. 高さがわかったので、幅を変更してみましょう。

CSS を調整

.demo-6 .row-1{width:100%;}
.demo-6 .remove{-webkit-transition: width 3s linear;}
.demo-6 .row-1.remove.active{width:0%;}

幅自体はパーセンテージで設定できますが、高さが固定されていないという問題は依然として存在します。

7. JS を使用して幅を変更する問題を解決します

CSS を設定します

.demo-7 .row-1{width:100%;height:48px;}
.demo-7 .remove{-webkit-transition: width 3s linear, opacity 3s ease;}
.demo-7 .row-1.remove.active{width:0%;opacity:0;}

固定了height已有动效正常了。其他的改进可参照前面的例子了。

二、一个完整的例子

完整的例子实在angular中实现的。angular实现首先一个问题就是在什么时机设置动效？因为，angular是双向绑定的，如果在controller中删除了一个对象，渲染界面的时候这个对象就没了，所以必须介入到数据绑定的过程中。angular提供ngAnimatie这个动画模块，试了一下它也确实可以完成ngRepeat列表数据更新的动效。但是要额外引入angular-animation.js，虽然不大，还是觉得不是很有必要。另外，我是在一个已经写好的框架页面上加动画，如果需要引入新的module，需要改框架文件，我觉得不好。试了试动态加载animation模块也没成功，所以就研究了一下自己怎么控制动效。

angular即使不加载animation模块，也有一个$animate，它为动效控制留出了接口。
看JS

var fnEnter = $animate.enter,
  fnLeave = $animate.leave;
$animate.enter = function() {
  var defer = $q.defer(),
    e = arguments[0],
    p = arguments[1],
    a = arguments[2],
    options = {
      addClass: 'ng-enter'
    };
  fnEnter.call($animate, e, p, a, options).then(function() {
    $animate.addClass(e, 'ng-enter-active').then(function(){
      var l = e[0].addEventListener('webkitTransitionEnd', function(){
        e[0].classList.remove('ng-enter-active');
        e[0].classList.remove('ng-enter');
        e[0].removeEventListener('webkitTransitionEnd', l, false);
        defer.resolve();
      }, false); 
    });
  });
  return defer.promise;
};
$animate.leave = function() {
  var defer = $q.defer(),
    e = arguments[0];
  $animate.addClass(e, 'ng-leave').then(function(){
    $animate.addClass(e, 'ng-leave-active').then(function(){
      var l = e[0].addEventListener('webkitTransitionEnd', function(){
        fnLeave.call($animate, e).then(function(){
          defer.resolve();
        });
      }, false);
    });
  });
  return defer.promise;
};

ng-repeat进行数据更新是会调用$animate服务的enters，leave和move方法，所以，要自己控制动效就要重写对应的方法。重写的时候要用$animate添加，直接在dom上设置有问题。（这一段的angular的逻辑比较底层，没有太看明白，还需要深入研究。）

另外，在移动行的位置时，要通过$timeout将删除和插入放到两个digest循环中处理，否则看不出效果。

var index = records.indexOf($scope.selected),
  r = records.splice(index, 1);
$timeout(function(){
  records.splice(index + 1, 0, r[0]);
},500);

angular的动画和digest循环关系密切，看了angular-animation.js的代码没看明白，还需要深入研究才行。