Master Vue.js Animations: From CSS Transitions to Advanced Effects

Page Dynamic Effects

Vue provides several ways to implement dynamic effects: toggling CSS properties, using CSS animation, manipulating styles via JavaScript, and component switching with v-if / v-show. The following sections illustrate each method.

CSS Transition Property Switching

Use the CSS transition property for simple smooth state changes.

<script setup>
import { ref } from 'vue';
const name = 'VUE动画';
const isActive = ref(true);
</script>

<template>
  <div class="page">
    <div class="card">
      <div class="card__header">
        <h3 class="card-title">{{ name }}</h3>
        <div class="card-subtitle">Transition & Animation</div>
      </div>
      <div class="card__content">
        <div :class="['emoji', { hidden: !isActive }]">🌲</div>
      </div>
      <div class="card__action">
        <button type="button" @click="isActive = !isActive;">请按这里</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import './styles/app.css';
@import './styles/animation.css';
@import './styles/card.css';

.emoji { font-size: 80px; transition: 0.5s; }
.hidden { opacity: 0; transform: translateX(30px); }
</style>

Clicking the button toggles isActive, which adds or removes the hidden class on the emoji element, triggering the transition.

CSS Animation Property

For more complex effects, define keyframes and apply them with the CSS animation property.

<script setup>
import { ref } from 'vue';
const name = 'VUE动画';
const isActive = ref(true);
</script>

<template>
  <div class="page">
    <div class="card">
      <div class="card__header">
        <h3 class="card-title">{{ name }}</h3>
        <div class="card-subtitle">Transition & Animation</div>
      </div>
      <div class="card__content">
        <div :class="['emoji', { pulse: isActive }]">🌲</div>
      </div>
      <div class="card__action">
        <button type="button" @click="isActive = !isActive;">请按这里</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import './styles/app.css';
@import './styles/animation.css';
@import './styles/card.css';

.emoji { font-size: 80px; }
.pulse { animation: pulse 1s infinite; }
@keyframes pulse {
  from { transform: scale3d(1,1,1); }
  50% { transform: scale3d(1.5,1.5,1.5); }
  to { transform: scale3d(1,1,1); }
}
</style>

The pulse class runs an infinite scaling animation defined by the @keyframes pulse rule.

Vue Built‑in Transition Components

<transition> Component

<template>
  <div class="page">
    <div class="card">
      <div class="card__header">
        <h3 class="card-title">{{ name }}</h3>
        <div class="card-subtitle">Transition & Animation</div>
      </div>
      <div class="card__content">
        <transition>
          <div v-if="isActive" class="emoji">🥹</div>
        </transition>
      </div>
      <div class="card__action">
        <button type="button" @click="isActive = !isActive;">请按这里</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.v-enter-from { opacity: 0; }
.v-enter-active { transition: .3s; }
.v-enter-to { opacity: 1; }
.v-leave-from { opacity: 1; }
.v-leave-active { transition: 1s; }
.v-leave-to { opacity: 0; }
</style>

Vue adds lifecycle classes ( .v-enter-*, .v-leave-*) that can be styled with transition or animation to control entry and exit animations.

Custom Transition Names

<template>
  <transition name="pulse">
    <div v-if="isActive" class="emoji">🥹</div>
  </transition>
</template>

<style scoped>
.pulse-enter-active { animation: pulse 1s; }
.pulse-leave-active { animation: pulse 1s; }
</style>

Assigning a name generates class names such as .pulse-enter-active and .pulse-leave-active, allowing reuse of existing keyframe definitions.

Using animate.css

Install the library and import it to use ready‑made animations.

npm i animate.css

import 'animate.css'

<transition class="animate__tada"
            enter-active-class="animate__animated animate__tada"
            leave-active-class="animate__animated animate__bounce">
  <div v-if="isActive" class="emoji">🥹</div>
</transition>

The animate__tada and animate__bounce classes provide distinct entry and exit effects.

Best Practices for Styling

Organize CSS with BEM naming and modular imports. Example files:

/* app.css – global styles */
input[type='text'], textarea, select { padding: 4px 8px; margin: 8px 0; font-size: 16px; }
label { margin-left: 4px; }
.page { padding: 32px; margin: 32px; }

/* card.css – component styles */
.card { display: flex; flex-direction: column; align-items: center; max-width: 300px; background: #f8f8f8; border-radius: 10px; }
.card__header { text-align: center; margin-bottom: 32px; }
.card__action > button { border: 2px solid #000; padding: 10px 24px; cursor: pointer; }

/* animation.css – keyframes */
.pulse { animation: pulse 1s infinite; }
@keyframes pulse {
  from { transform: scale3d(1,1,1); }
  50% { transform: scale3d(1.5,1.5,1.5); }
  to { transform: scale3d(1,1,1); }
}

Conclusion

Combining CSS transition / animation with Vue’s <transition> component or third‑party libraries such as animate.css enables rich page animations while keeping code modular and maintainable.