当前位置：首页 > VUE

vue 实现文字动画

2026-03-29 13:56:29VUE

文字动画实现方式

CSS Transition 动画

通过 Vue 的 v-bind:class 或 v-bind:style 绑定 CSS 类名或样式，利用 CSS Transition 实现文字动画效果。

<template>
  <div>
    <p :class="{ 'animate-text': isAnimated }">Hello Vue!</p>
    <button @click="isAnimated = !isAnimated">Toggle Animation</button>
  </div>
</template>

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

<style>
.animate-text {
  transition: all 0.5s ease;
  transform: scale(1.2);
  color: #42b983;
}
</style>

Vue Transition 组件

使用 Vue 内置的 <transition> 组件实现文字进入/离开动画。

vue 实现文字动画

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Animated Text</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>

GSAP 动画库

集成 GSAP 实现更复杂的文字动画效果。

vue 实现文字动画

<template>
  <div ref="textElement">Advanced Animation</div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  mounted() {
    gsap.to(this.$refs.textElement, {
      duration: 1,
      x: 100,
      rotation: 360,
      opacity: 0.5
    })
  }
}
</script>

文字打字效果

实现逐字显示的文字打字动画。

<template>
  <div>{{ displayedText }}</div>
</template>

<script>
export default {
  data() {
    return {
      fullText: 'This is a typing animation effect.',
      displayedText: '',
      index: 0
    }
  },
  mounted() {
    this.typeText()
  },
  methods: {
    typeText() {
      if (this.index < this.fullText.length) {
        this.displayedText += this.fullText[this.index]
        this.index++
        setTimeout(this.typeText, 100)
      }
    }
  }
}
</script>

文字颜色渐变动画

通过 CSS 动画实现文字颜色渐变效果。

<template>
  <p class="gradient-text">Color Changing Text</p>
</template>

<style>
.gradient-text {
  background: linear-gradient(90deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  background-size: 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient 5s linear infinite;
}

@keyframes gradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 400%;
  }
}
</style>