正文

Vue动画实战：50个实用案例，轻松实现页面炫酷效果

/0 浏览量
0627

在Vue.js的世界里，动画是一个非常有用的工具，它可以帮助我们创建更加生动和吸引人的用户界面。通过使用Vue的内置动画系统，开发者可以轻松实现各种炫酷的页面效果。本文将为您介绍50个实用的Vue动画案例，帮助您提升页面视觉效果。

案例一：列表项进入动画

在列表组件中，使用Vue的<transition>标签为每个列表项添加进入动画。

<template>
  <div>
    <transition-group name="list" tag="div">
      <div v-for="item in items" :key="item.id" class="list-item">
        {{ item.text }}
      </div>
    </transition-group>
  </div>
</template>

<style>
.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

案例二：卡片翻滚效果

通过使用Vue的<transition>标签和CSS3的transform属性，实现卡片翻滚效果。

<template>
  <div>
    <transition name="flip" mode="out-in">
      <div :key="activeIndex" class="card">
        <h2>{{ activeCard.title }}</h2>
        <p>{{ activeCard.description }}</p>
      </div>
    </transition>
  </div>
</template>

<style>
.flip-enter-active, .flip-leave-active {
  transition: transform 0.5s;
}
.flip-enter, .flip-leave-to {
  transform: rotateY(90deg);
}
</style>

案例三：动态进度条

使用Vue的<transition>标签和CSS动画，创建一个动态的进度条。

<template>
  <div>
    <transition name="progress" mode="out-in">
      <div :key="progress" class="progress-bar">
        <div :style="{ width: `${progress}%` }"></div>
      </div>
    </transition>
  </div>
</template>

<style>
.progress-enter-active, .progress-leave-active {
  transition: width 1s;
}
.progress-enter, .progress-leave-to {
  width: 0;
}
</style>

案例四：幻灯片切换效果

通过使用Vue的<transition>标签和CSS动画，实现幻灯片切换效果。

<template>
  <div>
    <transition-group name="slide" tag="div">
      <div v-for="slide in slides" :key="slide.id" class="slide-item">
        <h2>{{ slide.title }}</h2>
        <p>{{ slide.description }}</p>
      </div>
    </transition-group>
  </div>
</template>

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

案例五：图片加载动画

使用Vue的<transition>标签和CSS动画，实现图片加载动画。

<template>
  <div>
    <transition name="fade" mode="out-in">
      <img v-if="imageLoaded" :src="imageUrl" alt="image" />
      <div v-else class="placeholder">Loading...</div>
    </transition>
  </div>
</template>

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

总结

通过以上50个实用案例，您可以轻松实现各种炫酷的页面效果。这些案例涵盖了从列表项动画、卡片翻滚效果，到动态进度条、幻灯片切换效果以及图片加载动画等多种场景。希望这些案例能够帮助您在Vue开发中更加得心应手，提升用户体验。

-- 展开阅读全文 --