svelte 中的过渡仅在第一次起作用

Question

我正在使用 svelte 进行免费代码训练营 "Random Quote Machine" 项目这里： https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine

我尝试 "scale" 过渡到报价组件。过渡仅在第一次进行。我知道我每次都需要创建和销毁 DOM 元素，就像在文档中一样： "A transition is triggered by an element entering or leaving the DOM as a result of a state change"。怎么做正确？

我的应用程序组件：

<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 example

svelte 中的过渡仅在第一次起作用

transition in svelte is working only in the first time

transition

svelte