Vue_JS动画与Velocity.js动画

一时失言乱红尘 2022-05-20 22:14 238阅读 0赞

**一.JS动画**  
前面我们用css实现动画效果，那可不可以用JS来实现动画效果么？可以的  
在transition标签里定义触发事件

@before-enter：在进入动画之前触发的函数，有一个参数，指的是要执行动画的元素

@enter：在进入动画执行的函数，有两个参数，第一个指执行动画的元素，第二个是动画完成的参数

@after-enter：在执行完enter之后执行的事件。有一个参数，指执行动画的元素

eg：

<transition name='fade' @before-enter='beforeenterClick' @enter='enterClick' @after-enter='afterenterClick'>
      <div v-if="cssanimate">hello css animate</div>
    </transition>
      <button @click='cssclick'>css动画</button>

在methods中定义每一时刻触发事件的动作。

beforeenterClick:function(el){ 
          el.style.color ='red';
    },
    enterClick:function(el,done){ 
        setTimeOut(()=>{
           el.style.color = 'green';
    },2000)
    setTimeOut(()=>{
      done()
    },4000)
      },
    afterenterClick:function(el){ 
       el.style.color = '#000'
    }

需要注意的是，使用after-enter之前，需要在enter事件中执行done();

这样就可以实现JS的动画效果了。

同理出场动画，和入场动画是相似的。@before-leave、@leave、@after-leave

**二.Velocity.js动画**

在前端，我们经常使用Velocity.js库来实现我们的动画

进入项目

安装 npm install velocity-animate –save-dev

页面引入： import Velocity from ‘velocity-animate’

仍然是JS触发事件，在实践中应用velocity的动画

beforeenterClick:function(el){ 
          el.style.opacity =0;
    },
         enterClick:function(el,done){ 
         Velocity(el,
          {opacity:1},
          {duration:1000,
           complete:done
         })
      },
    afterenterClick:function(el){ 
        console.log('动画结束')
    }