worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

tweak animation

Browse source
This commit is contained in:
syuilo 2023-02-05 14:35:00 +09:00
parent 1139632f95
commit e67d7bc0ea
1 changed files with 13 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
packages/frontend/src/components/MkDateSeparatedList.vue
View file

@ -107,19 +107,19 @@ export default defineComponent({
return () => h( return () => h(
defaultStore.state.animation ? TransitionGroup : 'div', defaultStore.state.animation ? TransitionGroup : 'div',
{ {
class: { class: {
[$style['date-separated-list']]: true, [$style['date-separated-list']]: true,
[$style['date-separated-list-nogap']]: props.noGap, [$style['date-separated-list-nogap']]: props.noGap,
[$style['reversed']]: props.reversed, [$style['reversed']]: props.reversed,
[$style['direction-down']]: props.direction === 'down', [$style['direction-down']]: props.direction === 'down',
[$style['direction-up']]: props.direction === 'up', [$style['direction-up']]: props.direction === 'up',
}, },
...(defaultStore.state.animation ? { ...(defaultStore.state.animation ? {
name: 'list', name: 'list',
tag: 'div', tag: 'div',
onBeforeLeave, onBeforeLeave,
onLeaveCanceled, onLeaveCanceled,
} : {}), } : {}),
}, },
{ default: renderChildren }); { default: renderChildren });
}, },
@ -139,18 +139,10 @@ export default defineComponent({
transition: none !important; transition: none !important;
} }
> .list-leave-active,
> .list-enter-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); 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 { > *:empty {
display: none; display: none;
} }