Dativejs 애니메이션

dativejs의 애니메이션은 굉장합니다
그리고 Web Animation Api을 사용합니다.

따라서 맞춤형 애니메이션을 쉽게 만들 수 있습니다.

요리를 시작하자

import Dative from 'dativejs';

export let Anime = Dative.extend({
   ...,
   animate: {
      rotate({ animate,delay,duration }){
         animate([ 
            { rotate: '0deg' },
            { rotate: '360deg' },
         ],{
            delay,
            duration,
            easing
         })
      } 
   },
   template: `
     <h1 @rotate="3000, 5">I'm Rotating</h1>
   `
})

애니메이션 지시문animate:<animate-name>="duration, delay"에도 짧은 방법@<animate-name>="duration, delay"이 있습니다.

이것이 애니메이션이 사용된 방식입니다.

  template: `
     <h1 @rotate="3000, 5">I'm Rotating</h1>
   `

읽어 주셔서 감사합니다

제발 날