Как использовать транзиции в Svelte?

@eryn.rodriguez 

Транзиции в Svelte используются для создания анимаций при переходе между состояниями компонентов. Есть несколько способов использования транзиций.

1. Добавление транзиций к компонентам:

Можно добавить транзицию к компоненту, используя директиву transition. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

  import { fade } from 'svelte/transition'

  let visible = false


 visible = !visible}>
  {visible ? 'Скрыть' : 'Показать'}


{#if visible}
  
    Я появляюсь с плавным эффектом
  
{/if}


  div {
    background-color: yellow;
    border: 1px solid black;
  }

Здесь мы создали функцию транзиции fade, используя svelte/transition. Затем добавили эту транзицию к элементу div, когда он появляется и исчезает.

1. Создание компонентов транзиций:

Можно создать компонент транзиции, который будет использоваться в различных компонентах. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

  import { slide } from 'svelte/transition'

  export let visible = false



  {#if visible}
    
  {/if}



  div {
    background-color: yellow;
    border: 1px solid black;
    padding: 20px;
    position: relative;
  }

Здесь мы создали компонент транзиции slide, который использует директиву transition для добавления анимации к элементу div. Компонент принимает свойство visible, которое определяет, должен ли компонент отображаться.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

  import Slide from './Slide.svelte'

  let visible = false


 visible = !visible}>
  {visible ? 'Скрыть' : 'Показать'}



  Я появляюсь с анимацией

Здесь мы импортировали компонент Slide и передали ему свойство visible, чтобы определить, должен ли компонент отображаться.

Транзиции предоставляют большую гибкость и помогают создавать более интересные и динамичные пользовательские интерфейсы в Svelte.