What are some examples of animations in Vue.js?

What are some examples of animations in Vue.js?

Vue.js offers various animation techniques, such as transitions, keyframe animations, and third-party libraries. Would you like to see specific examples?

Yes, please show me a simple transition example.

Sure! You can use the <transition> component in Vue. For example:

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

That looks great! Can you explain how the CSS works in this example?

Absolutely! The CSS defines the transition effects. The .fade-enter-active and .fade-leave-active classes control the duration of the transition, while .fade-enter and .fade-leave-to set the initial and final opacity.