В настоящее время я изучаю реакции и переходы, и по некоторым причинам приведенные здесь примеры и другие вопросы не будут работать для меня.Я просто хочу создать легкий эффект затухания, и даже если я скопирую пример, например this , он не сработает.Я создал компонент под названием Content.Там мой рендер выглядит следующим образом:
<div className="banner-timer" style={this.setBanner()}></div>
<div className="row mt-4">
<div className="col">
<div>
<button>Add Item</button>
<ReactCSSTransitionGroup
transitionName="example"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}
transitionAppear={true}
transitionAppearTimeout={5000}>
<h1 className="text-center">testheader1</h1>
<h1 className="text-center">testheader2</h1>
<h1 className="text-center">testheader3</h1>
<h1 className="text-center">testheader4</h1>
<h1 className="text-center">testheader5</h1>
</ReactCSSTransitionGroup>
</div>
</div>
</div>
<p className="color-light" style={{height: '300px'}}>this is a test</p>
После этого у меня есть файл App.css, в который я добавил свои классы для анимации:
.example-enter {
opacity: 0.01;
}
.example-enter.example-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.example-leave {
opacity: 1;
}
.example-leave.example-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
.example-appear {
opacity: 0.01;
}
.example-appear.example-appear-active {
opacity: 1;
transition: opacity .5s ease-in;
}
Если я начнутеперь сервер я вижу в те 5 секунд, что все классы будут установлены.Но эффект не будет показан.Если я изменю в консоли dom классы в течение 5 секунд, анимация будет показана.Похоже, что свойство перехода не будет работать при первом вызове.