What are some examples of animations in Vue.js?

What are some examples of animations in Vue.js?

Vue.js offers various animation examples, such as transitions for entering and leaving elements, and keyframe animations.

Can you show me a simple example of a fade-in effect?

Sure! You can use the <transition> component with CSS classes to create a fade-in effect. Here's a basic example:

<template>
  <transition name="fade">
    <div v-if="show">Hello, Vue.js!</div>
  </transition>
  <button @click="show = !show">Toggle</button>
</template>

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

What about using JavaScript for animations?

You can use JavaScript hooks in Vue's transition system to create more complex animations. For example, you can define before-enter, enter, and leave hooks to control the animation timing and effects.