首頁猿問如何修復 React 的 CSS 轉換？

如何修復 React 的 CSS 轉換？

JavaScript

慕桂英4014372 2022-12-22 13:07:45

我正在構建一個簡單的登錄/注冊屏幕。我正在通過狀態變量切換登錄/注冊表單。切換工作正常，但一切都發生在一幀內，我想為表單容器的高度過渡設置動畫，以及在切換時淡入或淡出表單。我正在努力理解/馴服過渡屬性，到目前為止我設法過渡了高度，但它只工作一次，當然，我無法為表單不透明度設置動畫。誰能幫我弄清楚我錯過了什么？代碼沙盒鏈接：https ://codesandbox.io/s/wizardly-flower-e42dj

查看完整描述

1 回答

慕容708150

TA貢獻1831條經驗獲得超4個贊

最好將代碼粘貼到此處，但無論如何您都可以使用 CSS 關鍵幀來實現淡入效果。

.fade-in {

animation: fadeIn ease 1s;

-webkit-animation: fadeIn ease 1s;

-moz-animation: fadeIn ease 1s;

-o-animation: fadeIn ease 1s;

-ms-animation: fadeIn ease 1s;

}

@keyframes fadeIn {

0% {

opacity:0;

}

100% {

opacity:1;

}

@-moz-keyframes fadeIn {

0% {

opacity:0;

}

100% {

opacity:1;

}

@-webkit-keyframes fadeIn {

0% {

opacity:0;

}

100% {

opacity:1;

}

@-o-keyframes fadeIn {

0% {

opacity:0;

}

100% {

opacity:1;

}

@-ms-keyframes fadeIn {

0% {

opacity:0;

}

100% {

opacity:1;

}

當您添加類以顯示登錄表單和注冊表單時，也要添加這個“淡入”類。同樣，您可以為淡出編寫相同的內容。

https://codesandbox.io/s/broken-wildflower-dwn0q?file=/src/App.js

更新了您的代碼供您參考。

反對回復 2022-12-22

1 回答
0 關注
87 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何修復 React 的 CSS 轉換？

如何修復 React 的 CSS 轉換？

1 回答

添加回答

如何修復 React 的 CSS 轉換？