Solid Transition Group¶

Solid Transiton Group - это библиотека анимации, предназначенная для создания плавных переходов между состояниями. Это означает, что с ее помощью легче анимировать элементы, входящие и выходящие из DOM.

Установка¶

1

npm install solid-transition-group

или

1

yarn add solid-transition-group

Transition¶

Компонент <Transition> - это компонент-обертка, который обеспечивает эффекты перехода для одного дочернего компонента. Компонент <Transition> применяет поведение перехода только к обернутому внутри него содержимому; он не создает дополнительного элемента DOM и не отображается в проверяемой иерархии компонентов.

Приведем пример простого перехода с использованием CSS- и JS-анимации:

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

// simple CSS animation
<Transition name="slide-fade">{show() && <div>Hello</div>}</Transition>

// JS Animation
<Transition
  onEnter={(el, done) => {
    const a = el.animate([{ opacity: 0 }, { opacity: 1 }], {
      duration: 600
    });
    a.finished.then(done);
  }}
  onExit={(el, done) => {
    const a = el.animate([{ opacity: 1 }, { opacity: 0 }], {
      duration: 600
    });
    a.finished.then(done);
  }}
>
  {show() && <div>Hello</div>}
</Transition>

Вот как выглядит CSS для 'slide-fade':

1
2
3
4
5
6
7
8
9

.slide-fade-enter-active,
.slide-fade-exit-active {
    transition: all 0.3s ease;
}
.slide-fade-enter,
.slide-fade-exit-to {
    transform: translateX(10px);
    opacity: 0;
}

Свойства¶

События¶

TransitionGroup¶

<TransitionGroup> - это компонент-обертка, который обеспечивает эффекты перехода для нескольких дочерних компонентов. Компонент <TransitionGroup> применяет поведение перехода только к содержимому, находящемуся внутри обертки; он не создает дополнительного элемента DOM и не отображается в проверяемой иерархии компонентов.

<TransitionGroup> поддерживает перемещение переходов с помощью трансформации CSS. При изменении положения дочернего компонента на экране после обновления к нему будет применен перемещаемый CSS-класс (автоматически сгенерированный из атрибута name или настроенный с помощью атрибута move-class). Если в момент применения класса перемещения свойство CSS transform имеет значение "transition-able", то элемент будет плавно анимирован до места назначения с использованием техники FLIP.

1
2
3
4
5
6
7

<ul>
    <TransitionGroup name="slide">
        <For each={state.items}>
            {(item) => <li>{item.text}</li>}
        </For>
    </TransitionGroup>
</ul>

Приведенный выше код будет выдвигать каждый элемент на экран при добавлении его в список или при изменении порядка списка. Ниже приведен CSS для перехода 'slide':

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

.slide-move {
    transition: transform 0.3s ease;
}
.slide-enter-active,
.slide-exit-active {
    transition: all 0.3s ease;
}
.slide-enter,
.slide-exit-to {
    transform: translateX(10px);
    opacity: 0;
}

Свойства¶

Единственное различие между <TransitionGroup> и <Transition> заключается в том, что <TransitionGroup> имеет дополнительное свойство 'moveClass', которое перезаписывает CSS-класс, применяемый при переходе.

События¶

<TransitionGroup> также поддерживает те же события, что и <Transition>.

Ссылки¶

• Solid Transition Group

Комментарии