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

【问题标题】：transition in svelte is working only in the first time苗条的过渡仅在第一次起作用
【发布时间】：2019-09-03 05:24:48
【问题描述】：

我正在使用 svelte 进行免费代码营“随机报价机”项目这里： 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>

我的 Button 组件（它与带有“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}

【问题讨论】：

标签： transition svelte

【解决方案1】：

一个非常简单的方法是设置引用为null，隐藏元素，然后在更新引用之前等待超时，导致div隐藏并重新出现REPL example

【讨论】：