<input type=checkbox bind:checked=visible> visible
{#if visible}
<p transition:fade>fades in and out</p>
{/if}
<script>
export default {
transitions: {
fade(node, { delay = 0, duration = 400 }) {
const o = +getComputedStyle(node).opacity;
return {
delay,
duration,
css: t => `opacity: ${t * o}`
};
}
}
};
</script>
{}