Почему не работает 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-group не работает?
Ничего вы из массива не удаляете (если только про код не наврали).
Нужно или нет — я без понятия. Вы почему-то предпочли умолчать о том, что пытаетесь сделать.
как это не было удаления, если я «сразу же элемент добавил обратно»?
Vue не выполняет рендеринг сразу же после изменения данных.
С точки зрения js я удалил элемент
Нет. Фильтрация + присваивание удалением не является. Так что никаких домыслов, говорю как есть.
«не работает» — нормальный разговор, если есть конкретный пример
Нет, не нормальный. Ещё раз — задавая вопрос, следует рассказывать, какого поведения вы пытаетесь добиться. Да и «конкретного примера» не было — так, огрызки кода. «Конкретный пример» — это ссылка на песочницу.
Источник
почему response-addons-css-transition-group здесь не работает?
Вот как я использую переходную группу. Вот мои занятия по style.css
Когда я добавляю элементы elements (VariableDefine), изменяя данные idToVarStates , я вообще не получаю никакой анимации. Что здесь не так? как это исправить?
3 ответа
Пакет был удален.
Во-первых, вот введение о response-addons-css-transition-group в пакете npm.
response-addons-css-transition-group Код в этом пакете перемещен. Вместо этого мы рекомендуем вам использовать CSSTransitionGroup из response-transition-group.
Таким образом, пакет activ-addons-css-transition-group сейчас не рекомендуется использовать. Рекомендуется использовать response-transition-group.
Страница может быть раздавлена.
Во-вторых, Object.keys (idToVarStates) .map будет отображать слишком много TransitionGroup.And и сделать страницу раздавленной.
Измените переход CSST на этот.
Рабочий код
Я создаю пример для response-transition-group. Вот результат.
Простой ответ Посылка была перемещена. Согласно странице npm для react-addons-css-transition-group .
Код в этом пакете перемещен. Вместо этого мы рекомендуем вам использовать CSSTransitionGroup из response-transition-group.
Попробуйте удалить текущий пакет, запустив npm uninstall react-addons-css-transition-group . Затем установите правильный пакет с помощью:
При необходимости измените импорт и оберните CSSTransitionGroup
Вы также можете пройтись по этому пути (можно найти на странице github группы response-transition-group) руководство по миграции, которое поможет вам в этом.
Надеюсь это поможет.
Я отредактировал ваш код и заменил его на мой код, и он отлично работает над моим кодом.
Источник
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.
Источник
Не работает свойство 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 не работает
используйте для скрытия:
Источник
