Через систему перехода Vue.js вы можете легко добавить эффекты анимации перехода в процесс вставки/удаления узлов DOM. VUE будет добавлять/удалить имена классов CSS в подходящее время для запуска эффектов перехода/анимации CSS3. Вы также можете предоставить соответствующую функцию JavaScript Hook для выполнения пользовательских операций DOM в процессе перехода.
Взять инструкцию v-transition = "my-transition" в качестве примера, когда узел DOM с этой инструкцией вставлен или удален, Vue будет:
Используйте идентификатор My-Transition, чтобы узнать, есть ли зарегистрированный объект JavaScript Hook. Этот объект может быть зарегистрирован по всему миру Vue.trantion (ID, Hooks) или определен внутри текущего компонента с помощью опции переходов. Если этот объект будет найден, соответствующий крючок будет вызван на разных этапах переходной анимации.
Автоматически обнаруживает, применяется ли целевой элемент эффекты перехода CSS или эффекты анимации, и добавьте/удаляет имя класса CSS в соответствующее время.
Если функция JavaScript Hook не предоставлена и соответствующий эффект перехода/анимации CSS не обнаружен, вставка/удаление DOM выполняется немедленно в следующем кадре.
Все эффекты перехода Vue.js вступят в силу только в том случае, если операция DOM будет запускается через Vue.js. Запуск может быть выполнен встроенными инструкциями, такими как V-IF или с помощью методов экземпляра VUE, таких как VM. $ AppendTo ().
Эффект перехода CSS
Типичный эффект перехода CSS определяется следующим образом:
<div v-if = "show" v-transition = "expand"> hello </div>
Вам также необходимо определить три класса CSS:.
.expand-transition {переход: все .3s легко; Высота: 30px; Заполнение: 10px; фоновый цвет: #EEE; переполнение: hidden;}. Expand,. Заполнение: 0 10px; непрозрачность: 0;}В то же время вы также можете предоставить JavaScript крючки:
Vue.transition ('expand', {aneverenter: function (el) {el.textContent = 'передентре'}, enter: function (el) {el.textContent = 'enter'}, AfterEnter: function (el) {el.textContent = 'AfterEnter'}, EnterCancelded: function (el) {// grackeltation} foreame: be foreel}, eforeave}, eforeave}, eforeave}, eforeave}, eforeave}, eforeave: befortation}, eforeave}, effereave}, empereave: beforletation}, eM. {el.textContent = 'beforeleave'}, оставить: function (el) {el.textContent = 'Leave'}, AfterLeave: function (el) {el.textContent = 'AfterLeave'}, LeaVeCancelled: functрезультат
Имя класса CSS, используемое здесь, определяется значением директивы V-транзиции. Принимая v-transition = "FADE" В качестве примера, CSS-класс. Фад-трансляция всегда будет существовать, и. FADE-ENTER и .FADE-LEAVE будут автоматически добавлены или удалены в нужное время. Когда Директива V-транзиции не предоставляет значение, используемые имена классов CSS будут по умолчанию .V-транзиция,.
При изменении атрибута Show Vue вставит/удаляет элемент <div> на основе его текущего значения, и добавить/удалить соответствующий класс CSS в соответствующее время, следующим образом:
Когда шоу станет ложным, Vue будет:
1. Позвоните в крюк Beforeleave;
2. Применить класс CSS .V-Leave на элемент, чтобы вызвать эффект перехода;
3. Позвоните в крючок от оставить;
4. Подождите, пока будет выполнен эффект перехода; (Слушайте событие TransitionEnd)
5. Удалите элементы из DOM и удалите класс CSS .V-Leave.
6. Позвоните в крючок для запоздачи.
Когда шоу правда, Vue будет:
1. Позвоните в крючок до начала;
2. Примените CSS Class.V-enter на элемент;
3. Вставьте элемент в DOM;
4. Позвоните в крючок Enter;
5. Примените класс. Наконец-то удалите.
6. Дождитесь выполнения эффекта перехода;
7. Позвоните в крючок для загрязнения.
Кроме того, если элемент, который выполняет входящий эффект перехода, удаляется до завершения перехода, будет выполнен энтузиационный крюк. Этот крюк может быть использован для очистки, таких как удаление таймеров, созданных на Enter. То же самое относится и к элементам, которые повторно вставлены во время перехода.
Когда все вышеперечисленные функции крючка выполняются, это указывает на соответствующий экземпляр VUE. Если сам элемент является корневым узлом экземпляра VUE, экземпляр будет применяться как этот; В противном случае это указывает на экземпляр, которому принадлежит инструкция по переходу.
Наконец, функции Enter и Offect могут принять дополнительный второй параметр: функция обратного вызова. Когда ваша подпись функции содержит второй параметр, это означает, что вы рассчитываете использовать этот обратный вызов для явного завершения всего процесса перехода, а не полагаться на VUE для автоматического обнаружения событий TransitionEnd переходов CSS. например:
Enter: function (el) {// нет второго параметра // Конец эффекта перехода определяется с помощью CSS Transition Event}ПРОТИВ
Enter: function (el, dode) {// Существует второй параметр // Конец эффекта перехода должен быть определен путем вручную вызов `dod`}Когда несколько элементов выполняют эффекты перехода одновременно, Vue.js будет пакетным процессом, чтобы гарантировать, что принудительная макет запускается только один раз.
CSS анимация
Анимации CSS называются так же, как и эффект перехода CSS. Разница в том, что в анимации класс.
Пример: (префикс совместимости опущен)
<span v-show = "show" v-transition = "Bounce"> Посмотрите на меня! </span>
.bounce-enter {animation: Bounce-in .5s;}. Bounce-Leave {animation: Bounce-Out .5S;}@KeyFrames Bounce-In {0% {Transform: Scale (0); } 50% {преобразование: масштаб (1,5); } 100% {transform: Scale (1); }}@keyframes Bounce-Out {0% {Transform: Scale (1); } 50% {преобразование: масштаб (1,5); } 100% {transform: Scale (0); }}результат
Чистый эффект перехода JavaScript
Вы также можете просто использовать крючки JavaScript без определения каких -либо правил перехода CSS. При использовании только JavaScript Hooks, крючки Enter and Offee должны использовать обратный вызов, в противном случае они будут называться синхронно, и переход немедленно закончится. В следующем примере мы используем jQuery для регистрации пользовательского эффекта перехода JavaScript:
Vue.transition ('fade', {enter: function (el, dode) {// элемент был вставлен в DOM в это время // Вызов, выполненный, когда анимация завершена $ (el) .css ('непрозрачность', 0). Animate ({непрозрачность: 1}, 1000, выполнен)}, Entercelded: function (el) {$ (el). {// аналогично enter chrok $ (el) .Animate ({opacity: 0}, 1000, dode)}, leavecancelled: function (el) {$ (el) .stop ()}})После определения этого перехода вы можете вызвать его, указав соответствующий идентификатор на V-транзицию:
<p v-transition = "fade"> </p>
Если на элемент, который использует только эффекты перехода JavaScript, оказывается влияющим на другие правила перехода/анимации CSS, это может мешать механизму обнаружения перехода Vue. При столкновении с этой ситуацией вы можете запретить обнаружение CSS, добавив CSS: False в ваш объект крючка.
Постепенно эффект перехода
При использовании как V-транзиции, так и V-повторного оборудования мы можем добавить прогрессивный эффект перехода к элементу списка. Вам просто нужно добавить ошеломляющие, вводительные или уходные функции (в миллисекундах):
<div v-repeat = "list" v-transition stagger = "100"> </div>
Или вы также можете предоставить ошеломляющие, энтузверггерные или эв.
Vue.transition ('stagger', {stagger: function (index) {// Добавить задержку 50 мс к каждому элементу перехода, //, но максимальная задержка составляет 300 мс возврата math.min (300, индекс * 50)}})Пример:
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.