svelte - 如何正确改变元件过渡速度？

Question

我的目标是通过组件属性提供过渡速度，并为增长和收缩设置不同的值。到目前为止，我设法通过以编程方式更改组件样式来实现这一点。

<script>
    let isFullHeight = false
    export let fullHeight = 400
    export let growDurationMs = 1234
    export let shrinkDurationMs = 567
</script>
<div id="container" style={isFullHeight ?
    `height: ${fullHeight}px; transition: height ${growDurationMs}ms;` :
    `transition: height ${shrinkDurationMs}ms;`}
    on:click={() => isFullHeight = !isFullHeight}>
</div>

这可以完成这项工作，但也许有更惯用/优雅的方式来做到这一点。

使用此示例链接到 Svelte REPL

Answer 1

这个答案基于丹尼尔上面的评论。这个想法是将样式表示为一个对象以使其更具可读性，然后将其转换为样式字符串。

<script>
  ...
  $: styleObj = isFullHeight ? {
      height: `${fullHeight}px`,
      transition: `height ${growDurationMs}ms`
    } : {
      transition: `height ${shrinkDurationMs}ms`
    }

  $: style = Object.entries(styleObj).map(([k, v]) => `${k}:${v}`).join(';')

现在组件看起来更干净了：

<div {style}>
  ...