React - CSS-переход как страница книги

Question

Я изучаю более сложные темы, изучая React и Front Web Dev в целом.

Я узнал о ReactCSSTransitionGroup с уходом / вводом.. и т. д. Но кажется, что он больше не поддерживается, и мы должны использовать CSSTransitionGroup сейчас.

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

Но теперь я хочу сделать что-то еще, сделав страницу книги, например, переход, деформировав реальную страницу и открыв следующую.

Я смотрю вокруг, но пока не нашел решения. Я также начал читать о WebGL или CSS3 Transition для этого, но я полностью потерян.

Может ли кто-то не просто дать фрагмент, но и объяснить мне, как сделать этот переход?

Answer 1

Переходы с помощью CSS довольно просты, когда вы освоите их.

#myPage {
   transition: all .5s;
}

Этот маленький кусочек CSS скажет, если когда-нибудь изменится мой стиль #myPage div позволяет сделать это за 5 секунд. Будьте осторожны с этим, он работает только со счетными значениями свойств. Так display:none -> display:block не будет использовать эффекты перехода. Вам придется изменить высоту / ширину.

#myPage {
    transition: width 2s, height 4s;
}

Вы также можете настроить таргетинг свойств напрямую, назвав их после transition имущество.

Кроме того, вы можете использовать transform свойство в css манипулировать элементами в трех измерениях.

#myPage{
    transition: transform 1s;
}
#myPage:hover{
    transform: rotateX(150deg);
    transform: rotateY(150deg);
    transform: rotateZ(150deg);
}

Надеюсь, это поможет вам начать.