transition in svelte is working only in the first time - transition

Question

i'm doing the Free Code Camp "Random Quote Machine" project in svelte
here :
https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine
I try to do a "scale" transition to the quote component. the transition is working only on the first time. I understand that I need to create and destroy the DOM element every time , like it is in the documentation :
"A transition is triggered by an element entering or leaving the DOM as a result of a state change".
how to do it correct ?
my App component :
<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>
my Button component (it's the same component to the "twit" button with "a" tag, and to the newQuote button):
<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}
my Quote component :
<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

One quite simple way to do this is to set the quote to null, hiding the element, and then wait for a timeout before updating the quote, resulting in the div hiding and re-appearing REPL example