欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue中JS动画与Velocity.js的结合使用

程序员文章站 2022-05-25 18:46:21
前面学习了用css实现动画效果,那 vue 中能不能用js实现动画效果呢? 其实 vue 提供了很多动画钩子 enter 入场动画钩子函数有before-ente...

前面学习了用css实现动画效果,那 vue 中能不能用js实现动画效果呢?

其实 vue 提供了很多动画钩子

enter

入场动画钩子函数有before-enter、enter、after-enter

before-enter

动画出现前的事件

<div id="root">
  <transition name="fade"
    @before-enter="handlebeforeenter"    //动画出现前的事件
  >
    <div v-if="show">hello world</div>
  </transition>
  <button @click="handleclick">切换</button>
</div>
let vm = new vue({
  el: '#root',
  data: {
    show:true
  },
  methods: {
    handleclick(){
      this.show = !this.show
    },
    handlebeforeenter(el){     //接收一个参数 el,为 dom 元素
      el.style.color = 'red'
    }
  }
})

enter

before-enter事件结束后执行

<div id="root">
  <transition name="fade"
    @before-enter="handlebeforeenter"
    @enter="handleenter"    //before-enter 事件结束后执行
  >
    <div v-if="show">hello world</div>
  </transition>
  <button @click="handleclick">切换</button>
</div>
let vm = new vue({
  el: '#root',
  data: {
    show:true
  },
  methods: {
    handleclick(){
      this.show = !this.show
    },
    handlebeforeenter(el){
      el.style.color = 'red'
    }
    handleenter(el,done){      //接收两个参数,第一个参数 el 为 dom 元素,第二个参数是 done 是个回调函数
      settimeout(()=>{
        el.style.color = 'green'
        done()         //done 回调函数非常重要,在执行完动画后需手动执行下这个函数,相当于告诉 vue 这个动画已经执行完了,会再去调用 after-enter 事件
      },2000)
    }
  }
})

after-enter

enter事件中done被调用后,after-enter事件会被触发

<div id="root">
  <transition name="fade"
        @before-enter="handlebeforeenter"
        @enter="handleenter"
        @after-enter="handleafterenter"   //enter 事件中 done 被调用后,after-enter 事件会被触发
  >
    <div v-if="show">hello world</div>
  </transition>
  <button @click="handleclick">切换</button>
</div>
let vm = new vue({
  el: '#root',
  data: {
    show: true
  },
  methods: {
    handleclick() {
      this.show = !this.show
    },
    handlebeforeenter(el) {
      el.style.color = 'red'
    },
    handleenter(el, done) {
      settimeout(() => {
        el.style.color = 'green'
        done()
      }, 2000)
    },
    handleafterenter(el) {   //接收一个参数 el,为 dom 元素
      settimeout(()=>{
        el.style.color = 'blue'
      },2000)
    }
  }
})

leave

与入场动画对应的出场动画钩子函数有before-leave、leave、after-leave。它们的用法与入场动画用法一样

velocity.js库

有了上面基础后,配合velocity.js库,能实现更强大的动画效果。

<div id="root">
  <transition name="fade"
        @before-enter="handlebeforeenter"
        @enter="handleenter"
        @after-enter="handleafterenter"   //enter 事件中 done 被调用后,after-enter 事件会被触发
  >
    <div v-if="show">hello world</div>
  </transition>
  <button @click="handleclick">切换</button>
</div>
let vm = new vue({
  el: '#root',
  data: {
    show: true
  },
  methods: {
    handleclick() {
      this.show = !this.show
    },
    handlebeforeenter(el) {
      el.style.opacity = 0
    },
    handleenter(el, done) {
      velocity(el, {     //第一个参数是要操作的 dom 元素
        opacity: 1
      }, {
        duration: 1000,   //第三参数中需要配置一个 complete 属性,值为 done,因为 velocity 执行完后会自动执行 complete 属性,这里设置为 done 是让它去触发 after-enter 事件
        complete: done
      })
    },
    handleafterenter(el) {
      console.log('动画结束')
    }
  }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。