Version

3.0.11

Reproduction link

https://codesandbox.io/s/optimistic-rhodes-qpoxk?file=/src/App.vue

Steps to reproduce

Click the button, the text show in 1second.

What is expected?

transition component set prop duration and its value is 5000. transition duration should be 5s .

What is actually happening?

transition duration is still 1s. The text is still show transition 1s.

The prop is not meant to change the duration specified in your CSS. It defines when the transition component will consider the transition to be finished and trigger the end evenrts (afterAppear, afterEnter, afterLeave).

<template>
  <transition name="fade" :duration="5000" @afterEnter="end">
    <p v-if="show">Test</p>
  </transition>
  <button @click="show = !show">Click</button>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      show: false,
    };
  },
  methods: {
    end() { console.log('end') }
  }
};
</script>

It's main use it for JS-based transitions or when multiple transforms of differing duration are defined in the CSS.

In most cases, Vue can automatically figure out when the transition has finished. By default, Vue waits for the first transitionend or animationend event on the root transition element. However, this may not always be desired - for example, we may have a choreographed transition sequence where some nested inner elements have a delayed transition or a longer transition duration than the root transition element.

https://v3.vuejs.org/guide/transitions-enterleave.html#explicit-transition-durations