React css transition не работает

React CSS Transition Group, не работает?

Извинения за простоту этой проблемы, но я новичок в React и пытается реализовать простую CSSTransitionGroup, чтобы скрыть/показать элемент, но с затуханием, слайдом и т.д. Документация кажется очень простой, но по некоторым причинам следующий код не будет работать для меня.

Пока.box переключается между присутствием или нет, я не вижу ни одного из переходов CSS на месте входа и выхода.

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

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

«Warning: Failed propType: transitionEnterTimeout не был отправлен в ReactCSSTransitionGroup: это может вызвать ненадежную анимацию и не будет поддерживаться в будущей версии React. Подробнее см. В разделе xxx. Проверьте метод рендеринга Demo «.

«Warning: Failed propType: transitionLeaveTimeout не был отправлен в ReactCSSTransitionGroup: это может вызвать ненадежную анимацию и не будет поддерживаться в будущей версии React. Подробнее см. В статье xxx. Проверьте метод рендеринга Demo .»

Добавление двух отсутствующих реквизитов, и он отлично работает.

transitionEnterTimeout и transitionLeaveTimeout берут число, представляющее продолжительность перехода в миллисекундах, следовательно, «300» для перехода на 3,2 секунды, который соответствует указанным вами переходам CSS.

Источник

React CSS transition работает неправильно

Я написал приложение React, используя CSS-переходы. Но эти переходы не работают правильно в некоторых компонентах. В Мои приложения, только компоненты, которые движутся вверх, работают хорошо, те, кто движется вниз, перемещаются мгновенно без анимации. (Я хочу, чтобы они оба двигались с анимацией.)

вот CSS, который я использовал там:

Я также построил codepen.IO project показать проблема. Он имеет полный код этого демо-проекта.

Я попытался добавить запись журнала в componentDidUpdate , componentDidMount и componentWillUnmount методы чтобы показать, создаются ли эти компоненты повторно или обновляются, он показывает, что все они обновляются (не создаются повторно или удаляются) каждую секунду.

4 ответов

Ну, после того, как я начал щедрость, потому что у меня также есть эта проблема, я, наконец, нашел то, что кажется проблемой.

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

Итак, для случаев, в которых вы хотите использовать position absolute, ключевой концепцией является визуализация контейнеров ваших элементов один раз (в этом случае просто divs) и изменение только внутреннего содержимого на основе нового порядка. Если вам нужно добавить больше элементов, просто добавьте их в конце.

Я изменил ваш код, чтобы он отражал то, что я говорю. Мой пример очень глуп, потому что я только что создал 4 ad-hoc divs, но он иллюстрирует идею: создайте как можно больше контейнеры, как вам нужно, но не используйте карту, которая воссоздает их каждый раз, или ваши переходы будут вырезаны.

Итак, проблема в том, как вы создаете статический список контейнеров и как вы перебираете этот список, чтобы первый контейнер отображал первый элемент ваших данных, второй контейнер-второй элемент и т. д.

надеюсь, что это поможет, эта проблема меня это тоже сводило с ума! 🙂

Если вы удаляете элемент из виртуального DOM, то react обновит его содержимое, поэтому вы не увидите анимации. Что вы можете сделать, это либо использовать react-transition-group или скажите вашему приложению подождать X МС перед обновлением dom после вызова события или использовать видимость для переключения между скрытым и отображением вместо того, чтобы полностью удалить его из DOM.

вы можете обмануть реагировать с помощью index как ключ. Если вы думаете о el и index в качестве начальной позиции (индекс) и конечной позиции (el) элемент переместился в старую конечную позицию к концу перехода, и когда он там, он захватывается новой начальной позицией и (индекс) переключается в соответствии с новой настройкой. Это потому, что когда вы установите key в элементе в react виртуальный DOM всегда будет интерпретировать его как один и тот же элемент. И ради этого, вы правы в настройке индекса как » id » в целом.

Я сделал рабочий пример только путем переключения index / el (и установки положения элемента в абсолют).

вы воссоздали DOM элементы каждый раз.
Вы должны определить значение ключа collect. Я изменил значение вашего ключа » + el to » + index .

Источник

React css transition does not work correctly

I’ve written a React app, using CSS transitions. But those transitions does not work correctly in some of the components. In my app, only the components who are moving upwards works well, those who are moving downwards moves instantly without animation. (I want them both moves with animation.)

Here is the CSS I used there:

I also built a codepen.io project to show the problem. It has the complete code of this demo project.

I’ve tried to add a log entry to componentDidUpdate , componentDidMount and componentWillUnmount methods to show whether these component are re-created or updated, it shows that they are all updated (not re-created, or removed) every second.

5 Answers 5

Well, after I started a bounty because I also have this problem I finally found what seems to be the problem.

When you are using absolute position (or relative, as in your case), if you re-render the whole list every time, React will re-order the elements in the DOM (as you said, the elements are not being recreated, just updated). But this creates the problem with the transitions. apparently, if you move an element while the transition is running then you end up cutting the animation.

So, for cases in which you want to use position absolute, the key concept is to render the containers of your elements once (in this case, just divs) and only change the inner contents based on the new order. If you need to add more elements, just add them at the end.

I modified your codepen so that it reflects what I am saying. My example is very dumb because I just created 4 ad-hoc divs, but it illustrates the idea: create as many containers as you need, but DO NOT use a map that recreates them every time, or your transitions will be cut.

So, the problem is basically how you create a static list of containers and how you iterate through that list so that the first container renders the first element of your data, the second container the second element, etc.

Hope that it helps, this problem was driving me crazy too! 🙂

Источник

Почему не работает ReactCSSTransitionGroup?

Код тупо скопировал из документации:

И итоге вокруг CartItem появляется простой элемент span, без классов. Все. Потом пропадает когда удаляю CartItem

• Вопрос задан более трёх лет назад
• 937 просмотров

Вам не нужно каждый элемент оборачивать в ReactCSSTransitionGroup.

ну и, конечно, у вас должен быть описан css example-enter и example-leave, как в документации

То есть каждый элемент по отдельности нельзя анимировать? Печально, фантазия наших дизайнеров безгранична и они могут придумать не только каждый элемент анимировать, но и в зависимости от условий анимировать их по разному.
Сделал так:

Теперь все CartItem оборачиваются элементом span с классом cart2. Стили для классов .example-leave и .example-enter, конечно, подключил.

А вообще что должно происходить? Я так понимаю, что компоненты CartItem должны быть обернуты с некий элемент (span), затем на 5000 миллисекунд этому элементу добавляется один класс, или на 3000 миллисекунд другой. На эти классы можно повесить анимацию. Правильно?

1. Вполне можно анимировать и один элемент.

2. По-умолчанию да, span. Вы можете изменить это с помощью props component, как это сделал я в примере.

3. Не копал глубоко, но вероятно да, на детей вешаются классы.

4. Вам в какой момент нужна анимация? Если у вас уже ReactCSSTransitionGroup уже примонтирован в DOM и вы в него добавляете новые элементы, которые нужно анимировать — вам действительно нужен enter. Если у вас ReactCSSTransitionGroup монтируется одновременно с дочерними элементами, вам нужен appear вместо enter

Да ReactCSSTransitionGroup монтируется вместе с анимируемыми элементами. Нажал кнопку — компонент вставляется в DOM, нажал еще раз — удаляется. Но хотелось бы, чтобы элемент не появлялся внезапно, а плавно открывался.

Та же история — обертка из span’а с классом cart2. Специально ставлю большие значения таймаута, чтобы разглядеть добавление классов. Ничего 🙁

Нет ли какой-то альтернативы для анимации реакт-компонентов без шаманства с ReactCSSTransitionGroup

Источник

Не работает свойство transition?

Добрый день. При наведении на фото должен срабатывать transition. То есть плавно появляться фон и текст.

Скрытый текст:
.about-text <
display: none;
justify-content: center;
flex-direction: column;
width: 100%;
padding: 15px;
position: absolute;
top: 0;
bottom: 0;
transition: 1s;
>

При наведении:
.about-item:hover .about-text <
background: rgba(0, 0, 0, 0.75);
display: flex;
>

• Вопрос задан более трёх лет назад
• 297 просмотров

Есть «дискретные*» свойства. Те, значения которых могут принимать ограниченное число вариантов, они как правило обозначены специальными словами. Например, свойство display может принимать значения none, block, inline и т.д. Свойство text-decoration — none, underline, line-through и т.д. К таким свойствам нельзя применить плавный переход (transition) из одного состояния в другое, потому что между этими состояниями нет промежуточных значений. То же самое относится к свойству z-index, он не может принимать дробных значений, background-image — картинка или есть или ее нет, или она просто сменяется на другую.
Напротив «недискретные» свойства могут плавно перетекать из одного состояния в другое. Преимущественно они заданы числом. Сюда же относится цвет, потому что цвет — это тоже число. Примеры таких свойств: left, width, background-position, font-size и т.д.

Запомните это, и не пытайтесь анимировать «дискретные» свойства.

* «дискретные» — мой термин, я не знаю как правильно их называть.

transition с display не работает
используйте для скрытия:

Источник