How can I customize animation timing in Vue 3?

How can I customize animation timing in Vue 3?

You can customize animation timing in Vue 3 by using the transition component and specifying the enter and leave classes with your desired timing.

Can you give me an example of how to implement that?

Sure! You can define CSS classes for your animations and use the transition component like this:

<template>
  <transition
    name="fade"
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
  >
    <div v-if="show">Hello World!</div>
  </transition>
</template>

<script>
export default {
  data() {
    return { show: false };
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0;
    },
    enter(el, done) {
      el.offsetHeight; // trigger reflow
      el.style.transition = 'opacity 1s';
      el.style.opacity = 1;
      done();
    },
    leave(el, done) {
      el.style.transition = 'opacity 1s';
      el.style.opacity = 0;
      done();
    }
  }
};
</script>

What if I want to use different timings for enter and leave?

You can specify different timings by setting different transition durations in your CSS classes. For example:

.fade-enter-active {
  transition: opacity 0.5s;
}
.fade-leave-active {
  transition: opacity 1s;
}