如何在slite中实现自定义顺风动画

Question

在slite我想创建这个动画，但是如何呢?

这个类应该根据动画的状态从div中添加或删除。

<!--
Dropdown menu, show/hide based on menu state.
Entering: "transition ease-out duration-100"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"

Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->

当isUserMenuOpen布尔标志被打开时

{#if isUserMenuOpen}
<div transition:fade>
<UserDropMenu />
</div>
{/if}

Answer 1

要在tailwind中创建自定义动画，您可以扩展tailwind配置文件。

类似:

module.exports = {
theme: {
extend: {
keyframes: {
fade-in: {
from: { opacity: 0%; scale: 95%; },
to: { opacity: 100%; scale: 100%; },
},
fade-out: {
from: { opacity: 100%; scale: 100%; },
to: { opacity: 0%; scale: 95%; },
}
},
animation: {
'animation-in': '1s ease-out 0 fade-in',
'animation-out': '0.75s ease-in 0 fade-out',
}
}
}
}

你可以这样做:

<script>
let show = false;
let hide = false;
</script>
{#if show}
<h1 class:animation-in={show && !hide}
class:animation-out={hide}
on:animationend={() => {if(hide) {show = false; hide = false;}}}>
Hello
</h1>
{/if}
<button on:click={() => show = true}>
show
</button>
<button on:click={() => hide = true}>
hide
</button>

可能有更好的方法来管理这种状态，但我认为这应该工作，除非我搞砸了顺风配置部分(动画中的元素顺序可能是错误的，关键帧中的from和to关键字可能不工作，而不是0%，100%)。