苗条的过渡仅在第一次起作用

Question

>我正在做自由代码营"随机报价机"项目。 这里： https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine

我尝试对报价组件进行"缩放"过渡。 转换仅在第一次起作用。我知道我每次都需要创建和销毁 DOM 元素，就像在文档中一样： "由于状态更改，进入或离开 DOM 的元素会触发转换"。 如何正确操作？

我的应用程序组件 ：

<script>
import {onMount} from 'svelte'
import Quote from './Quote.svelte'
import Button from './Button.svelte'
let quotes=""
let quote=""

onMount(async ()=> {
const res=await fetch('https://gist.githubusercontent.com/natebass/b0a548425a73bdf8ea5c618149fe1fce/raw/f4231cd5961f026264bb6bb3a6c41671b044f1f4/quotes.json')
quotes=await res.json()
let r=Math.ceil(Math.random()*quotes.length)
quote= quotes[r]
})
const handleClick=()=>{
quote=quotes[Math.ceil(Math.random()*quotes.length)]
}
</script>
<style>
#quote-box {
margin: 50px auto;
width: 50%;
border: 3px solid green;
padding: 10px;
text-align: center;
background: whitesmoke;  
}
</style>

<div id="quote-box">
<Quote {quote} />

<Button on:newQ={handleClick}
id="new-quote">New Quote</Button>
<Button 
href="{`https://twitter.com/intent/tweet?text="${quote.quote}"-${quote.author}`}" 
{quote} id="tweet-quote">
Twit</Button>
</div>

---

我的按钮组件(它与带有"a"标签的"twit"按钮和 newQuote 按钮的组件相同(：

---

<script>
import { createEventDispatcher } from 'svelte';
export let href
export let quote
export let id 
export let color
const dispatch=createEventDispatcher()
function twit() {
dispatch('twit',"");
}
function newQuote() {
dispatch('newQ',"");
}
</script>
<style>
button, a {
/* background-color:#008CBA; */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 10px;
}
#tweet-quote{
background-color:#008CBA;
}
#new-quote {
background-color: #f44336;
}
</style>
{#if href}
<a {id} target="_blank" {href} ><slot/></a>
{:else }
<button {id} on:click={newQuote}><slot/></button>
{/if} 

---

我的报价组件：

---

<script>
import { scale } from 'svelte/transition';
export let quote
</script>

{#if quote}
<div class="container" transition:scale>
<p id="text">{quote.quote}</p>
<p id="author">{quote.author}</p>
</div >
{:else}
<p>loading</p>
{/if}

Answer 1

一种非常简单的方法是将引号设置为 null，隐藏元素，然后在更新引号之前等待超时，从而导致div 隐藏并重新出现 REPL 示例