Как правильно изменить скорость перехода компонентов?

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}>
  ...