angular.js - Berkenaan pelaksanaan animasi js dalam sudut, seorang pemula ingin meminta nasihat.

Question

Saya baru sahaja bersentuhan dengan animasi Angular saya sendiri yang menulis animasi dan mencubanya. Mari kita mulakan dengan kod itu

var animate = angular.module('phoneAnimations', []);
animate.animation('.phoness', function() {    //这个是给ngview用的
    return {
        enter: function(element, done) {
            element.css({
                opacity: 0.5,
                position: "relative",
                top: '100px',
                left: '200px'
            }).animate({
                top: 0,
                left: 0,
                opacity: 1
            }, 1000, done)
        }
    }
})


animate.animation('.repeat-animation', function () {    //这个是给那个repeat用的
  return {
    enter : function(element, done) {
      console.log("entering...");
      var width = element.width();
      element.css({
        position: 'relative',
        left: '-100px',
        opacity: 0
      });
      element.animate({
        left: 0,
        opacity: 1
      }, done);
    },
    leave : function(element, done) {
      element.css({
        position: 'relative',
        left: 0,
        opacity: 1
      });
      element.animate({
        left: '-100px',
        opacity: 0
      }, done);
    },
    move : function(element, done) {
      element.css({
        left: "50px",
        opacity: 0.5
      });
      element.animate({
        left: "0px",
        opacity: 1
      }, done);
    }
  }
});

Kod adalah seperti di atas Masalahnya ialah: animasi ngview boleh dilaksanakan, tetapi ulangan tidak sah, dan ia juga tidak sah apabila menukar dan menapis Hanya dengan log keluar animasi pertama, iaitu ngview, boleh animasi muncul seperti biasa, mengapa ini?

Soalan lain ialah: Apabila menggunakan animasi CSS Angular, animasi ngview dan ngrepeat juga ditetapkan, tetapi hanya animasi ngview akan dilaksanakan apabila ia dimuat semula Adakah terdapat sebarang cara untuk mengawal yang mana satu dilaksanakan dahulu ? Atau biarkan animasi ngrepeat dilaksanakan apabila menyegarkan?

Dua soalan, pemula sila hantar surat jaminan kepada saya.

Terdapat juga perenggan tentang animasi dalam kod sumber sarung kucing telefon rasmi, saya tidak perlu memahaminya, kemudian kodkannya

angular.
  module('phonecatApp').
  animation('.phone', function phoneAnimationFactory() {
    return {
      addClass: animateIn,
      removeClass: animateOut
    };

    function animateIn(element, className, done) {
      if (className !== 'selected') return;

      element.css({
        display: 'block',
        position: 'absolute',
        top: 500,
        left: 0
      }).animate({
        top: 0
      }, done);

      return function animateInEnd(wasCanceled) {
        if (wasCanceled) element.stop();
      };
    }

    function animateOut(element, className, done) {
      if (className !== 'selected') return;

      element.css({
        position: 'absolute',
        top: 0,
        left: 0
      }).animate({
        top: -500
      }, done);

      return function animateOutEnd(wasCanceled) {
        if (wasCanceled) element.stop();
      };
    }
  });

HTML kelihatan seperti ini

<p class="phone-images">
  <img ng-src="{{img}}" class="phone"
      ng-class="{selected: img === $ctrl.mainImageUrl}"
      ng-repeat="img in $ctrl.phone.images" />
</p>

Saya tidak begitu faham cara menentukan sama ada hendak menambah atau mengalih keluar nama kelas? Adakah mungkin untuk bermula dengan return{addclass dan removeClass? Bukankah ini nama atribut tersuai? }

Answer 1

Kenapa tidak ada yang menjawab? Hati saya sangat letih