vue的transition demo（配合create-keyframe-animation使用）

本文介绍了一个使用Vue.js实现的简单动画过渡效果示例。通过点击事件触发元素的显示与隐藏，并利用Vue的transition组件结合自定义动画实现平滑过渡。动画效果包括元素的位置变化及背景颜色变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
<div>
  <div class="click" @click="onClick">click</div>
  <transition 
    @enter="onEnter" 
    @after-enter="onAfter" 
    @leave="onLeave" 
    @after-leave="onAfterLeave"
  >
    <div class="box" ref="box" v-show="flag"></div>
  </transition>  
</div>
</template>

<script>
import animations from 'create-keyframe-animation'

export default {
  data() {
    return {
      flag: false,
    }
  },
  methods: {
    onClick() {
      this.flag = !this.flag   
    },
    onEnter(e, done) {         
      animations.registerAnimation({
        name: 'move',
        animation: {
          0: {
            transform: 'translateX(0px)'
          },
          50: {
            background: 'red'
          },
          100: {
            transform: 'translateX(200px)'
          }
        },
        presets: {
          duration: 1000,
          easing: 'linear'
        }
      })
      animations.runAnimation(this.$refs.box, {
        name: 'move'
      }, done)      
    },
    onAfter() {      
      animations.unregisterAnimation('move')
      this.$refs.box.style.animation=''
    },
    onLeave(e, done) {      
      animations.registerAnimation({
        name: 'move',
        animation: {
          0: {
            transform: 'translateX(200px)'
          },
          50: {
            background: 'red'
          },
          100: {
            transform: 'translateX(0px)'
          }
        },
        presets: {
          duration: 1000,
          easing: 'linear'
        },        
      })
      animations.runAnimation(this.$refs.box, {
        name: 'move'
      }, done)     
    },
    onAfterLeave() {
      animations.unregisterAnimation('move')
      this.$refs.box.style.animation=''
    }
  }
}
</script>

<style lang="stylus" scoped>
.box
  width 100px
  height 100px
  background black  
  transform  translateX(200px)
</style>