tweak animation
This commit is contained in:
parent
1139632f95
commit
e67d7bc0ea
1 changed files with 13 additions and 21 deletions
|
@ -107,19 +107,19 @@ export default defineComponent({
|
|||
return () => h(
|
||||
defaultStore.state.animation ? TransitionGroup : 'div',
|
||||
{
|
||||
class: {
|
||||
[$style['date-separated-list']]: true,
|
||||
[$style['date-separated-list-nogap']]: props.noGap,
|
||||
[$style['reversed']]: props.reversed,
|
||||
[$style['direction-down']]: props.direction === 'down',
|
||||
[$style['direction-up']]: props.direction === 'up',
|
||||
},
|
||||
...(defaultStore.state.animation ? {
|
||||
name: 'list',
|
||||
tag: 'div',
|
||||
onBeforeLeave,
|
||||
onLeaveCanceled,
|
||||
} : {}),
|
||||
class: {
|
||||
[$style['date-separated-list']]: true,
|
||||
[$style['date-separated-list-nogap']]: props.noGap,
|
||||
[$style['reversed']]: props.reversed,
|
||||
[$style['direction-down']]: props.direction === 'down',
|
||||
[$style['direction-up']]: props.direction === 'up',
|
||||
},
|
||||
...(defaultStore.state.animation ? {
|
||||
name: 'list',
|
||||
tag: 'div',
|
||||
onBeforeLeave,
|
||||
onLeaveCanceled,
|
||||
} : {}),
|
||||
},
|
||||
{ default: renderChildren });
|
||||
},
|
||||
|
@ -139,18 +139,10 @@ export default defineComponent({
|
|||
transition: none !important;
|
||||
}
|
||||
|
||||
> .list-leave-active,
|
||||
> .list-enter-active {
|
||||
transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
|
||||
> .list-leave-from,
|
||||
> .list-leave-to,
|
||||
> .list-leave-active {
|
||||
transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
> *:empty {
|
||||
display: none;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue