vue实现ppt动画

Vue实现PPT动画的基本思路

使用Vue实现PPT动画效果，可以通过动态绑定CSS类、结合过渡动画和第三方库来实现。Vue的响应式特性非常适合处理动态内容切换和动画效果。

使用Vue过渡动画实现单页动画

Vue提供了内置的过渡系统，可以通过<transition>和<transition-group>组件实现元素进入/离开的动画效果。

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

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

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

实现多页幻灯片切换

对于多页PPT效果，可以结合动态组件和过渡动画实现页面切换。

<template>
  <div>
    <button @click="currentSlide = (currentSlide - 1 + slides.length) % slides.length">Prev</button>
    <button @click="currentSlide = (currentSlide + 1) % slides.length">Next</button>

    <transition name="slide" mode="out-in">
      <component :is="slides[currentSlide]" :key="currentSlide"></component>
    </transition>
  </div>
</template>

<script>
import Slide1 from './Slide1.vue'
import Slide2 from './Slide2.vue'
import Slide3 from './Slide3.vue'

export default {
  components: { Slide1, Slide2, Slide3 },
  data() {
    return {
      currentSlide: 0,
      slides: ['Slide1', 'Slide2', 'Slide3']
    }
  }
}
</script>

<style>
.slide-enter-active, .slide-leave-active {
  transition: all 0.5s ease;
}
.slide-enter {
  transform: translateX(100%);
  opacity: 0;
}
.slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
</style>

使用第三方动画库

对于更复杂的动画效果，可以集成第三方动画库如Animate.css或GSAP。

<template>
  <div>
    <transition
      enter-active-class="animate__animated animate__bounceIn"
      leave-active-class="animate__animated animate__bounceOut"
    >
      <div v-if="show" class="box"></div>
    </transition>
    <button @click="show = !show">Toggle</button>
  </div>
</template>

<script>
import 'animate.css'
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

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

实现元素级动画效果

对于PPT中单个元素的动画效果，可以使用Vue的v-for结合过渡组和延迟动画。

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <transition-group name="list" tag="ul">
      <li v-for="(item, index) in items" :key="item" class="list-item">
        {{ item }}
      </li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3],
      nextNum: 4
    }
  },
  methods: {
    addItem() {
      this.items.push(this.nextNum++)
    }
  }
}
</script>

<style>
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

使用Vue Router实现全屏PPT

对于全屏PPT应用，可以结合Vue Router实现路由级别的过渡动画。

// router.js
const router = new VueRouter({
  routes: [
    { path: '/slide1', component: Slide1 },
    { path: '/slide2', component: Slide2 },
    { path: '/slide3', component: Slide3 }
  ]
})

// App.vue
<template>
  <transition :name="transitionName">
    <router-view></router-view>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      transitionName: 'slide'
    }
  },
  watch: {
    '$route'(to, from) {
      const toDepth = to.path.split('/').length
      const fromDepth = from.path.split('/').length
      this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
    }
  }
}
</script>

<style>
.slide-left-enter-active, .slide-left-leave-active,
.slide-right-enter-active, .slide-right-leave-active {
  transition: all 0.5s ease;
}
.slide-left-enter {
  transform: translateX(100%);
}
.slide-left-leave-to {
  transform: translateX(-100%);
}
.slide-right-enter {
  transform: translateX(-100%);
}
.slide-right-leave-to {
  transform: translateX(100%);
}
</style>

实现PPT动画控制

对于需要精确控制的动画，可以使用Vue的自定义指令或结合GSAP等动画库。

<template>
  <div>
    <div v-animate="{scale: isAnimating ? 1.2 : 1}">
      This element will scale when isAnimating is true
    </div>
    <button @click="isAnimating = !isAnimating">Toggle Animation</button>
  </div>
</template>

<script>
export default {
  directives: {
    animate: {
      inserted(el, binding) {
        el.style.transition = 'all 0.5s ease'
      },
      update(el, binding) {
        const { scale } = binding.value
        el.style.transform = `scale(${scale})`
      }
    }
  },
  data() {
    return {
      isAnimating: false
    }
  }
}
</script>