Описание тега vuejs-transition-group

1 ответ

Неожиданное поведение группы переходов при использовании отфильтрованного массива

У меня проблема с переходной группой. Проблема в том, что я пытаюсь сделать список отфильтрованным по какому-то условию. В моем примере - в зависимости от мин / макс. Как это можно исправить? Первоначально я пытался использовать вычисленное значение…
15 май '19 в 10:14
2 ответа

Можете ли вы изменить идентификатор элемента в vue.js?

У меня есть список элементов, содержащихся в массиве JavaScript. Подобно примерам, найденным в документации vue.js. Это рабочий процесс, с которым я борюсь: Пользователь нажимает "Добавить". Я немедленно добавляю элемент в список (в том месте, где е…
1 ответ

Vue.js: анимация переходной группы не работает

У меня есть слайдер, написанный как компонент группы перехода: <template> <div class="carousel-view"> <transition-group name="carousel-transition" class="carousel" tag="div"> <div v-for="(slide, index) in slides" :key="index" cl…
0 ответов

Проблемы с переходом группы элементов с помощью v-move (transition-group)

У меня возникли проблемы с переносом списка элементов в сетке. При использовании фильтра я хочу, чтобы элементы перемещались в их новейшую позицию, но также затухали элементы, которых больше нет в отфильтрованном списке. Я видел много примеров, но с…
12 июн '19 в 16:54
3 ответа

Анимировать добавление / удаление элементов из списка задач с помощью перехода

У меня есть список задач, который основан на примере, представленном в официальной документации vuejs. Пример: https://jsfiddle.net/87Lfbzng/ <ul class="todo-list"> <li v-for="todo in filteredTodos" class="todo" :key="todo.id" :class="{ com…
1 ответ

Как я могу предварительно загрузить изображения для использования в группе перехода

У меня есть transition-groupсодержащий два или более изображений. Это работает, но теперь я хочу предварительно загрузить следующее изображение в строке. Вот что у меня есть сейчас: <template> <transition-group name="fade" tag="div"> &lt…
1 ответ

плавный переход Nuxt/Vue на остальной части страницы при отображении и скрытии списка элементов

У меня есть список элементов сетки и кнопка переключения между "видеть больше" и "видеть меньше". При щелчке по кнопке "подробнее" отображается весь список. при щелчке по кнопке "видеть меньше" отображаются только 3 элемента. мы получили хороший пер…
1 ответ

Добавление анимации перехода при добавлении нескольких элементов в список во VueJS

Итак, взгляните на эту скрипку. Я хочу добавить анимацию перехода из функции vue при добавлении нового множественного элемента в отображаемый список. Я уже пробовал добавитьtransition-group с атрибутом tag="div". Однако элементы все равно добавлялис…
1 ответ

Анимация повторяющихся элементов списка, добавленных с помощью v-for

Я хочу анимировать элементы списка в цикле с группой перехода vue. Я хочу, чтобы добавленный элемент всегда был анимированным. Но я всегда анимировал последнюю. Исследования в документации / вопросах показали, что это обычно проблема с вводом ключей…
11 апр '20 в 13:56
1 ответ

Vue.js <transition-group> применяет анимацию только к последнему элементу

Я практикую переходную группу Vue и имитирую пример документа Vue специально в ЭТОМ конкретном разделе. Проблема в том, что в моем примере анимация будет применяться только к конечному элементу, а не к добавляемому / удаляемому элементу. Может кто-н…
2 ответа

VueJS transition-group не работает с изображениями, как я могу исчезнуть с изображений?

Я пытаюсь создать слайдер изображений, который затемняет изображения. Изображение 1 должно исчезнуть одновременно с появлением изображения 2. Другими словами: между ними не должно быть промежутка. Прямо сейчас он не делает ничего похожего на затухан…
19 апр '21 в 22:23
2 ответа

Как реализовать <transition-group> внутри цикла v-for?

Есть один предлагаемый ответ на этот вопрос, но решение не работает для меня. У меня есть вложенный v-for, и я хотел бы анимировать самые внутренние элементы li по мере их удаления или добавления моим вычисляемым оператором. Мой текущий код выглядит…
28 апр '21 в 00:24
0 ответов

Vue: содержимое мерцает при анимации элемента, который удаляется из списка

У меня возникла проблема при попытке анимировать элемент, который был удален из списка (с помощью группы перехода). Планировка довольно простая. Вверху экрана находится список ошибок, а под этим списком кнопка, удаляющая последний элемент из массива…
12 авг '21 в 12:29
1 ответ

Почему анимация перемещения VueJS работает только в одном направлении?

Я совершенно озадачен этим. По какой-то причине Vue3 правильно применит класс анимации перемещения для <transition-group/>содержащий список элементов, но только если список продвинут вперед. Я собрал для этого CodePen, и даже с очень простым в…
0 ответов

Группа перехода Vue не анимируется должным образом, когда первый элемент списка соединяется со списком

Я изо всех сил пытаюсь понять, почему моя группа перехода не анимируется должным образом при удалении первого элемента из списка. Сначала я попытался создать минимальный воспроизводимый пример, чтобы поделиться им на своей локальной машине, и у меня…
0 ответов

Vue Transition Group Animation — запуск v-move только после завершения v-leave

Я хотел бы иметь следующий поток: 5 элементов в стеке уведомлений. 1 элемент всплывает, поэтому он входит в состояние v-leave, а остальные 4 элемента вообще не анимируются. После того, как элемент переходит в состояние v-leave, остальные 4 элемента …
0 ответов

Vue 3 — Composition API — TransitionGroup со слотом

У меня есть группа перехода, которая отображает список элементов, я хотел бы добавить компонент в конце как последний элемент списка. Последний элемент добавляется через слот. Все работает нормально, но я получаю предупреждение, в котором говорится:…
0 ответов

VUE Странное поведение анимации переходной группы?

Если зажать стрелки на входе, то анимация начинает вести себя странно, почему? и как это исправить. https://codesandbox.io/s/exciting-jang-rgz6zx?file=/src/components/HelloWorld.vue
28 апр '22 в 12:34
0 ответов

Проблема Vue Transition Group: последний элемент объекта v-for выходит за пределы контейнера при переходе

Как видно из приведенного ниже кода, я пытаюсь применить групповой переход к объекту feedbacksToShow. Все работает хорошо, если только я не попытаюсь перейти к последнему элементу списка, который выходит за пределы контейнера div #feedback-list. Я н…
1 ответ

Почему элементы появляются в верхнем левом углу с TransitionGroup в Vue 3?

Сейчас я пытаюсь интегрировать анимацию в небольшой компонент, который содержит: заголовок, изображение и блок кнопок. Правила следующие: Изначально у нас есть только заголовок и изображение, При наведении курсора на компонент заголовок исчезает бли…