Наконец-то пришло время Vue вдохновить React?

Vue.js

react-transition-group

просмотр сегодняreact-transition-groupКогда я вдруг нашел лишний компонент:

react-transition-group

Хм? Странно,помню что раньше их было всего три.Когда обновили?Мое любопытство заставило нажать на появившуюся новую.SwitchTransition, я действительно не могу этого видеть, я в шоке, когда вижу это!

SwitchTransition

Принимая во внимание уровень английского языка каждого... (конечно, эта фраза кажется понятной без какого-либо уровня английского языка), позвольте мне перевести ее для вас: этоvue transition modesВдохновленные переходные компоненты. Если честно, Vue и React я часто ощущаю Vue.переходный компоненти реагироватьreact-transition-groupЭто очень похоже. Это почти другой псевдоним. Использование похоже. Я не знаю, кто кого скопировал. Может быть, они оба скопировали библиотеку анимации Angular.ng-animate. О нет, это надо назвать вдохновением, кто кем вдохновился (чувствуете ли вы, что меняя слово, вы мгновенно становитесь все выше и выше), на самом деле все с открытым исходным кодом, и очень хорошо впитывать и заимствовать Во-первых, но, поскольку vue всегда производил впечатление очень хорошего заемщика, а не очень хорошего новатора, React — полная противоположность. Так что все подсознательно думали, что это реакция, которую позаимствовал Vue.До сегодняшнего дня я узнал, что модель, которая уже есть у Vue, react-transition-group, только что была реализована, то естьпереходный режим

Переход Vue

На самом деле, на официальном сайте Vue это очень подробно описано, поэтому я не буду здесь повторять описание, а приведу вам портал:vue transition modes, в общем, достигается такая крутая функция: когда ваши компоненты переключаются, вы можете сделать так, чтобы компонент, который нужно удалить, и компонент, который нужно ввести, имели эффект анимации, между этими двумя анимационными эффектами есть разница во времени, и разница во времени равна двум. Существует два режима. Один из них — анимация компонента, который должен быть удален первым, например, затухание. После его исчезновения новый компонент снова появляется. Эта разница во времени формирует полный набор эффектов затухания. режим полностью противоположный: сначала появляется новый компонент, а затем исчезает старый компонент.

SwitchTransition

Тем не менее, крутой эффект, которого можно легко добиться в Vue, не имеет соответствующих инкапсулированных компонентов в реакции и может быть реализован только очень затруднительным образом, поэтомуSwitchTransitionОн родился!

Применение

Прежде всего, переходные компоненты реакции не интегрированы напрямую в базовую библиотеку vue, как vue, а должны быть установлены вручную:

#npm
npm i react-transition-group -S

#yarn
yarn add react-transition-group

Затем давайте воспользуемся реакцией, чтобы имитировать официальный случай vue.

//  /src/App.js
import React, { useState } from 'react';
import './App.css';
import { CSSTransition, SwitchTransition } from 'react-transition-group'

function App() {
  const [ bool, setBool ] = useState(false)
  const onClick = () => setBool(b => !b)
  return (
    <SwitchTransition>
      <CSSTransition classNames="fade" timeout={1000} key={bool ? "on" : "off"}>
        {
          bool ? (<button onClick={onClick}>on</button>)
               : (<button onClick={onClick}>off</button>)
        }
      </CSSTransition>
    </SwitchTransition>
  );
}

export default App;

/* /src/App.css */
.fade-enter, .fade-exit-active {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
}
.fade-enter-active, .fade-exit-active {
  transition: opacity 1s;
}

vue官网的第一个案例

Пока мы реализовали первый пример режима перехода официального сайта vue ↑↑↑, а затем реализуем второй пример↓↓↓

//  /src/App.js
import React, { useState } from 'react';
import './App.css';
import { CSSTransition, SwitchTransition } from 'react-transition-group'

function App() {
  const [ bool, setBool ] = useState(false)
  const onClick = () => setBool(b => !b)
  return (
    <div className="relative">
      <SwitchTransition mode="in-out">
        <CSSTransition classNames="fade" timeout={500} key={bool ? "on" : "off"}>
          {
            bool ? (<button className="btn" onClick={onClick}>on</button>)
                : (<button className="btn" onClick={onClick}>off</button>)
          }
        </CSSTransition>
      </SwitchTransition>
    </div>
  );
}

export default App;

/* /src/App.css */
.fade-enter {
  opacity: 0;
  transform: translateX(100%);
}
.fade-enter-active {
  transform: translateX(0);
  opacity: 1;
}
.fade-exit {
  transform: translateX(0);
}
.fade-exit-active {
  opacity: 0;
  transform: translateX(-100%);
}
.fade-enter-active, .fade-exit-active {
  transition: opacity .5s, transform .5s;
}
.relative {
  position: relative;
}
.btn {
  position: absolute;
  top: 0;
  left: 0;
}

在这里插入图片描述

  • Первый пример — режим по умолчанию: mode="out-in"

Это легко понять из названия: старый компонент сначала выполняет анимацию выхода, а затем новый компонент выполняет анимацию входа.

  • Второй пример: mode="in-out"

Просто посмотрите на динамическую картинку, чтобы понять: первый пришел, последний ушел.

В компоненте SwitchTransition есть только один атрибут с именем mode.Для атрибута есть только два значения: out-in и in-out.Если это out-in, то даже этот атрибут можно опустить, потому что он является атрибутом по умолчанию. .

Меры предосторожности

  1. Компонент должен иметь в себе компонент или и не может непосредственно заключать в себе компонент, который вы хотите переключить.
  2. Компоненты или в больше не принимают атрибут in для определения состояния элемента, как раньше. Вместо этого используется атрибут ключа. Нижний слой использует атрибут ключа для определения должен ли компонент быть перемещен внутрь или перемещен внутрь. Выйти из анимации.

Эпилог

Как насчет этого?Это весело, я взял вас на обзор Vue, а также узнал о новых компонентах react-transition-group кстати, и быстро открыть командную строкусоздать реагирующее приложениепотомyarn add react-transition-groupНу давай же!

Замечательные статьи в прошлом

Категории