首页技术文章正文

Web前端培训:Vue结合Velocity.js实现动画

更新时间:2022-09-28 来源:黑马程序员 浏览量:

IT培训班

  Velocity.js是一个简单易用、高性能且功能丰富的轻量级JavaScript动画库,它拥有颜色动画、转换动画(transform)、循环、缓动、SVG动画和滚动动画等特色功能。它支持Chaining链式动画,当一个元素连续应用多个velocity()时,动画以列队方式执行。

  接下来我们通过例4-5讲解如何使用Vue结合Velocity.js库实现动画效果。

  【例4-5】

  (1)获取velocity.min.js文件,保存到chapter04目录中。

  (2)创建C:\vue\chapter04\demo05.html文件,引入velocity.min.js,如下所示:

<script src="velocity.min.js"></script>

  (3)在demo05.html文件中编写HTML结构,具体代码如下:

<div id="app">
  <button @click="show=!show">动画效果</button>
  <transition @before-enter="beforeEnter" @enter="enter"
   @leave="leave" v-bind:css="false">
    <p v-if="show">文字动画效果</p>
  </transition>
</div>

  在上述代码中,第3~4行给标签添加了beforeEnter和enter两个入场动画函数,和一个leave出场动画函数。

  (4)在demo05.html文件中编写JavaScript代码,具体代码如下:

var vm = new Vue({
    el: '#app',
    data: {
        show: false,
    },
methods: {
  beforeEnter (el) {
      el.style.opacity = 0                  // 透明度为0
      el.style.transformOrigin = 'left'     // 设置旋转元素的基点位置
      el.style.color = 'red'                // 颜色为红色
  },
  enter (el, done) {
      Velocity(el, {opacity: 1, fontSize: '1.4em'}, {duration: 300})
                                                   // duration为动画执行时间
      Velocity(el, {fontSize: 'lem'}, {complete: done})
  },
  leave (el, done) {
    Velocity(el, {translateX: '15px', rotateZ: '50deg'},
     {duration: 3000})
    Velocity(el, {rotateZ: '1000deg'}, {loop: 2})
    Velocity(el, {rotateZ: '45deg', translateY: '30px',
     translateX: '30px', opacity: 0}, {complete: done})
   }
  }
})

  上述代码演示了利用Velocity.js库实现动画效果,其中,第12~22行调用了Velocity()函数,该函数的第1个参数是DOM元素,第2个参数用来传入CSS参数列表,第3个参数表示动画的配置项。

  (5)在浏览器中打开demo05.html,观察动画效果是否生效。

分享到:
在线咨询 我要报名
和我们在线交谈!