如何解决苗条的动画块过渡
<ul class="space-y-3 flex-col items-end justify-end absolute bottom-6 left-6 right-6 overflow-hidden">
{#each $chatdisplayQueue as chatEvent (chatEvent.id)}
<div in:fly={{y:150,duration: 200}} out:fade={{duration: 200}} animate:flip={{duration: 200}}>
<ChatMessage event={chatEvent}/>
</div>
{/each}
</ul>
注意我有一个过渡和一个动画。 过渡有效,但是,如果翻转动画在那里,则出过渡不起作用:/ 有没有办法正确地做到这一点,以便过渡和动画都能正常工作? 提前致谢
解决方法
如果我正确理解你的问题,你想要这样的东西:
<script>
import {flip} from 'svelte/animate';
import { fly } from 'svelte/transition';
let horizontal = false;
let next = 1;
let list = [];
const addItem = () => list = [next++,...list];
const removeItem = number => list = list.filter(n => n !== number);
const options = {};
</script>
<label>
Horizontal
<input type="checkbox" bind:checked={horizontal} />
</label>
<button on:click={addItem}>Add</button>
{#each list as n (n)}
<div transition:fly="{{ y: 200,duration: 2000 }}" animate:flip={options} class:horizontal class="container">
<button on:click={() => removeItem(n)}>{n}</button>
</div>
{/each}
<style>
.container {
width: fit-content; /* a fix */
}
.horizontal {
display: inline-block;
margin-left: 10px;
}
</style>
来源:url
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。