Красивая анимация загрузки списка v-for: практика хука анимации vue

Vue.js
Красивая анимация загрузки списка v-for: практика хука анимации vue

1. Старт

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

Воспользовавшись выходными, я сделал несколько демонстраций, чтобы поделиться с вами, первое изображение Теплое напоминание, точки знаний, которые вам нужно знать в этой статье, следующие:

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

2. Практика

Следующая реализация анимации - это только личное понимание, а не стандарт, я надеюсь, что большие ребята дадут указатели.

1. Последующий список

исходный код нажмите здесь

Список последующих действий появляется снизу и возвращается в исходное положение. Для достижения этой анимации я использовал padding-top со значением 100% на начальном этапе и 0% на конечном этапе (margin-top также может достичь этой анимации).

@keyframes one-in {
    from {
        padding-top: 100px;
        height: 0%;
    }
    to {
        padding-top: 0px;
        height: 100%;
    }
}

2. Список абзацев

исходный код нажмите здесь

Список абзацев появляется справа и возвращается в нормальное положение Я использовал padding-left как 100% на начальном этапе и 0% на конечном этапе для достижения этой анимации (margin-left также может достичь этой анимации).

@keyframes one-in {
    from {
        padding-left: 100%;
    }
    to {
        padding-left: 0%;
    }
}

3. Список в шахматном порядке

исходный код нажмите здесь

Список в шахматном порядке немного сложнее, но мы можем разбить его на две анимации.Появляется снизу слева, а высота меняется от нуля до 100 пикселей (специально устанавливается вами)

@keyframes one-in {
    from {
        padding-right: 100%;
        padding-top: 100px;
        height: 0;
    }
    to {
        padding-right: 0%;
        padding-top: 0px;
        height: 100px;
    }
}

Появляется из верхнего правого, высота изменяется с нуля до 100px (специально установлена ​​самостоятельно)

@keyframes one-in {
    from {
        padding-left: 100%;
        height: 0;
    }
    to {
        padding-left: 0%;
        height: 100px;
    }
}

Затем выберите другую анимацию для нечетных или четных на основе индекса рендеринга списка.

methods: {
    beforeEnter (el) {
        el.style.opacity = 0
    },
    enter (el, done) {
        let delay = el.dataset.index * 100
        let animation = el.dataset.index % 2 === 0
            ? 'one-in 0.4s infinite'
            : 'two-in 0.4s infinite'
        setTimeout(()=>{
            el.style.transition = 'opacity 0.4s '
            el.style.opacity = 1
            el.style.animation = animation
            el.style['animation-iteration-count'] = 1
            done()
        }, delay)
    }
}

4. Больше идей

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

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

3. Мысль

1. Понимание идей

Если говорить об идеях, то просто Vue определяет вставку и удаление всех дочерних узлов на своем собственном инкапсулированном компоненте перехода.по очередиВыбрасывание функций-хуков на каждом этапе действия этих свойств принимает анимации, настроенные нашим интерфейсом, или анимации в сторонних библиотеках.

Здесь последовательность вставки взята в качестве примера для обозначения начала анимации, начала анимации и конца анимации, то есть соответствующих функций ловушки beforeEntry, entry, entryTo

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

2. Практический опыт

2.1 Сведите к минимуму использование избыточных свойств для сложных анимаций

Атрибут перехода требует поставить несколько состояний перехода в разные функции хуков.Слишком много сложных кодов анимации и писать не лаконично.Конечно,если приходится так писать, то рекомендуется использовать метод добавления или удаление классов. Обычно этот избыточный атрибут редко используется

2.2 Многоцелевые свойства анимации

Преимущество свойств анимации заключается в том, что вы можете повторно использовать пользовательские анимации, и вам нужно только указать имя анимации.

2.3 Используйте функцию settiemout для последовательной установки задержек анимации из DOM.

Очень сложно установить разные задержки анимации в соответствии с разными DOM в анимации, но мы можем легко установить время начала анимации для DOM.

Справочная статья:[Перевод] Советы по превращению интерактивных анимаций из «хороших» в «превосходные»

Категории