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

Моя цель - обеспечить скорость перехода с помощью свойств компонентов и установить разные значения для увеличения и уменьшения. Пока мне удалось добиться этого, изменив стиль компонентов программно.

<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 с этим примером


svelte svelte-3 svelte-transition
person xuesheng    schedule 16.10.2020    source источник
comment
возможно, дело в предпочтениях, но я бы вынес определение стиля за пределы шаблона. Мне нравится, когда шаблоны легко читаются. svelte.dev/repl/4c0b3818578a461fb1e51402cversion59   -  person Daniel    schedule 16.10.2020
comment
@Daniel Выглядит намного лучше! Спасибо!   -  person xuesheng    schedule 16.10.2020
comment
... и я бы снова использовал функцию для преобразования представления объекта в строку стиля, чтобы оно было более читабельным   -  person Daniel    schedule 16.10.2020

Ответы (1)


arrow_upward
0
arrow_downward

Этот ответ основан на приведенном выше комментарии Дэниела. Идея состоит в том, чтобы представить стиль как объект, чтобы сделать его более читабельным, а затем преобразовать его в строку стиля.

<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}>
  ...
person xuesheng    schedule 29.10.2020