vue点击实现动画

使用 Vue 的过渡和动画系统

Vue 提供了内置的过渡和动画系统，可以通过 <transition> 和 <transition-group> 组件实现点击触发的动画效果。以下是一个简单的点击动画示例：

<template>
  <div>
    <button @click="show = !show">Toggle Animation</button>
    <transition name="fade">
      <p v-if="show">This element will fade in and out</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

使用 CSS 动画

Vue 过渡系统也支持 CSS 动画，可以通过定义 @keyframes 实现更复杂的动画效果：

<template>
  <div>
    <button @click="animate = !animate">Start Animation</button>
    <transition name="bounce">
      <p v-if="animate">Bouncing text</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      animate: false
    }
  }
}
</script>

<style>
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

使用 JavaScript 钩子

对于更复杂的动画需求，可以使用 JavaScript 钩子函数：

<template>
  <div>
    <button @click="show = !show">Toggle Animation</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
      :css="false"
    >
      <p v-if="show" ref="animatedElement">JavaScript animated element</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0
      el.style.transform = 'translateX(100px)'
    },
    enter(el, done) {
      let pos = 100
      const interval = setInterval(() => {
        el.style.opacity = (100 - pos) / 100
        el.style.transform = `translateX(${pos}px)`
        pos -= 2
        if (pos <= 0) {
          clearInterval(interval)
          done()
        }
      }, 20)
    },
    leave(el, done) {
      let pos = 0
      const interval = setInterval(() => {
        el.style.opacity = (100 - pos) / 100
        el.style.transform = `translateX(${pos}px)`
        pos += 2
        if (pos >= 100) {
          clearInterval(interval)
          done()
        }
      }, 20)
    }
  }
}
</script>

使用第三方动画库

可以集成第三方动画库如 Anime.js 或 GSAP 来实现更专业的动画效果：

<template>
  <div>
    <button @click="animateWithAnime">Animate with Anime.js</button>
    <div ref="box" class="box"></div>
  </div>
</template>

<script>
import anime from 'animejs'

export default {
  methods: {
    animateWithAnime() {
      anime({
        targets: this.$refs.box,
        translateX: 250,
        rotate: '1turn',
        backgroundColor: '#FF8A65',
        duration: 800,
        easing: 'easeInOutQuad'
      })
    }
  }
}
</script>

<style>
.box {
  width: 50px;
  height: 50px;
  background-color: #42b983;
  margin-top: 20px;
}
</style>

动态组件过渡

在不同组件之间切换时也可以应用过渡效果：

<template>
  <div>
    <button @click="currentComponent = currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'">
      Toggle Components
    </button>
    <transition name="slide-fade" mode="out-in">
      <component :is="currentComponent"></component>
    </transition>
  </div>
</template>

<script>
const ComponentA = {
  template: '<div>Component A</div>'
}

const ComponentB = {
  template: '<div>Component B</div>'
}

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  }
}
</script>

<style>
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>