Почему мой переход css не работает в реакции 18
Я много раз пытался добавить переход к eventBody, но он все еще не работает.
** вот код:
export function Event({ event }: EventProps) {
const [showDropDown, setShowDropDown] = useState(false)
return (
<div className = {styles.eventBody} hidden = {!showDropDown}>
<div className = {styles.line}></div>
<AttendeeList upcoming = {true} attenders = {attenders}></AttendeeList>
</div>
)
}
**CSS:
.eventBody {
transition: all 0.4s ease-out;
}
.eventBody[hidden='true'] {
display: none;
}
я устал устанавливатьShowDropDown через 100 мс при каждом щелчке по заголовку div, а также пытался использовать высоту при переходе вместо всего, но ничего не получалось
@GuyIncognito Я хочу использовать высоту, но когда я попытался установить высоту на 0, это тоже не сработало
Ответы 1
Ваш селектор css неверен. Кроме того, display не является анимируемым свойством.
.eventBody {
transition: all 0.4s ease-out;
height: 300px;
position: relative;
overflow: hidden;
}
.eventBody[hidden] {
height: 0;
}
я хочу использовать высоту, но когда я попытался установить высоту на 0, это тоже не сработало
Вы можете анимировать только фиксированную высоту, по умолчанию для высоты установлено значение auto, которое вы не можете анимировать. Однако вы можете обойти это, используя максимальную высоту, но это не идеально. Если вам нужна настоящая анимация высоты, вам нужно рассчитать высоту контейнера и переключаться между ней и 0.
Большой! Если вы считаете, что этот ответ ответил на ваш вопрос, вы можете пометить его как принятый, нажав на галочку рядом с ним. Нет никаких обязательств делать это.
display: noneне может переходить. Вы должны решить, какой переход вы хотите, и использовать его вместо этого, например,opacity: 0илиheight: 0или любой другой эффект, который вы хотите.