Vue: transition-group with duration property doesn't work

Created on 13 Oct 2019  路  2Comments  路  Source: vuejs/vue

Version

2.6.10

Reproduction link

https://codesandbox.io/s/vue-template-lcrsy

Steps to reproduce

Click "Move" button.

What is expected?

Both two lists move with animation.

What is actually happening?

Only second list which is applied duration with css has animation.

discussion feature request transition
Source
picture Monchi

Most helpful comment

duration only exists in transition. Since transition-group has 3 types of animations, we could have something like:

Number: Applies the same duration to _enter_, _leave_ and _move_

<transition-group :duration="500">...</transition-group>

Object: Explicit for every type of animation but requires the three of them

<transition-group :duration="{ enter: 500, leave: 800, move: 300 }">...</transition-group>
picture posva on 13 Oct 2019
👍2

All 2 comments

duration only exists in transition. Since transition-group has 3 types of animations, we could have something like:

Number: Applies the same duration to _enter_, _leave_ and _move_

<transition-group :duration="500">...</transition-group>

Object: Explicit for every type of animation but requires the three of them

<transition-group :duration="{ enter: 500, leave: 800, move: 300 }">...</transition-group>
posva picture posva on 13 Oct 2019
👍2

@posva I tried to resolve this: https://github.com/vuejs/vue/pull/10627
Please merge if it looks good.

Monchi picture Monchi on 13 Oct 2019
👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Jokcy picture Jokcy  路  3Comments
finico picture finico  路  3Comments
wufeng87 picture wufeng87  路  3Comments
loki0609 picture loki0609  路  3Comments
paceband picture paceband  路  3Comments