#animation #reactjs #reactcsstransitiongroup
#Анимация #reactjs #reactcsstransitiongroup
Вопрос:
Я создаю автоматическое слайд-шоу, в котором изображения переключаются каждые 5 секунд. Я использую ReactCSSTransitionGroup для создания метода fade in при поступлении нового изображения. Проблема в том, что когда новое изображение исчезает, старое изображение все еще присутствует, и оба изображения отображаются на экране, старое изображение не исчезнет, пока новое изображение не появится полностью. Как мне это исправить?
Это мой слайд-компонент для отображения изображения:
import React from 'react';
const Slide = ({picture}) => {
if(!picture){
return <div>Loading...</div>;
}
return (
<div className='row'>
<img src={picture.url} alt={picture.title} />
</div>
);
};
export default Slide;
Это часть родительского компонента, где я называю этот слайд компонентом
<ReactCSSTransitionGroup {...transitionOptions}>
<Slide key={this.props.active} picture={this.props.active}/>
</ReactCSSTransitionGroup>
Это делается в методе render() родительского элемента для установки параметров перехода
const transitionOptions = {
transitionName: "fade",
transitionEnterTimeout: 500,
transitionLeaveTimeout: 500
}
И это стиль
.fade-enter{
opacity: 0;
}
.fade-enter-active{
opacity: 1;
transition: 0.5s ease-in all;
}
В принципе, в родительском компоненте у меня есть метод setInterval, который изменяет активное изображение каждые 5 секунд. Итак, как мне заставить старое изображение исчезнуть в тот момент, когда новое начинает исчезать, чтобы оно не изменило мою страницу?
Спасибо
Комментарии:
1. Этот ключ может быть проблемой. Зачем вам там нужен ключ?
2. Без ключа в коде, который я написал, не было бы никакой анимации. Я думаю, что react ищет что-то уникальное, чтобы знать, какой элемент он анимирует. И я где-то видел видео, если у вас есть 2 точных элемента, это может анимировать неправильный
Ответ №1:
Удалите анимацию выхода, установив для transitionLeave свойства значение false , и удалите transitionLeaveTimeout свойство полностью. Вы настроили ReactCSSTransitionGroup анимацию на enter и leave с таймером 500 мс.
На мой взгляд, переход был бы приятнее, если бы выход Slide затухал, а вход Slide затухал. Для этого эффекта вам понадобятся оба Slide элемента, чтобы они располагались друг над другом посредством абсолютного позиционирования. Вот пример этого: http://codepen.io/yeahjohnnn/pen/rrobvR
Комментарии:
1. это работает! Спасибо. Но есть момент, когда экран мерцает, как мне сделать его плавным?
2. Можете ли вы поделиться своим кодом? Мерцание может быть вызвано рядом причин. Я подозреваю, что, вероятно, воспринимаемое мерцание изображения немедленно исчезает, в то время как следующее изображение начинает исчезать. Посмотрите на этот пример, где я заставил слайды исчезать при выходе и исчезать при входе, без мерцания: codepen.io/yeahjohnnn/pen/rrobvR . Или, если вы используете изображения, возможно, мерцание связано с загрузкой изображения, но я сомневаюсь в этом (вы могли бы предварительно загрузить изображения и кэшировать их, если это так).
3. Я обнаружил проблему с мерцанием. Итак, когда происходит переключение изображения, изображение все еще загружалось, поэтому была доля секунды, когда оно ничего не показывало. Это приводит к тому, что div, который у меня есть, сворачивается. Что я сделал, так это установил родительский div с нужными мне шириной и высотой вместо дочернего div, который содержит изображение. Таким образом, когда он все еще загружается, сторона пустого div остается той же, и это остановило изменение размера страницы. И спасибо за ваш пример в code pen. Я попытаюсь использовать это в качестве ориентира, чтобы мои появлялись и исчезали, а не только появлялись.