第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

防止?jié)L動條出現在變換上：使用 React-Spring 進行翻譯

防止?jié)L動條出現在變換上：使用 React-Spring 進行翻譯

藍山帝景 2022-01-20 20:41:30
每當我將translate()CSS 函數添加到元素將離開視口的react-spring useTransition鉤子from或leave屬性時，我都會得到一個垂直/水平滾動條。const transitions = useTransition(show, null, {    from: {        opacity: 0,        transform: "translate3d(500px,0px,0px) scale(1)"    },    enter: {        opacity: 1,        transform: "translate3d(0px,0px,0px) scale(1)"    },    leave: {        opacity: 0,        transform: "translate3d(0px,-500px,0px) scale(1)"    },    config: {        duration: 3000    }});我知道這是意料之中的，一般的解決方案是添加overflow: hidden到body.但是我不確定在動畫發(fā)生時如何執(zhí)行此操作？因為我不想一直添加overflow: hidden，body因為我確實需要訪問某些頁面中的滾動條，而不是在動畫啟動時？這是一個CodeSandbox供您自己嘗試
查看完整描述

1 回答

?
慕田峪7331174

TA貢獻1828條經驗 獲得超13個贊

您可以使用 document.body.classList.add 和 remove 更改正文的類。例如，您可以再添加一個 useEffect，如下所示：


  useEffect(() => {

    if (show) {

      document.body.classList.add("animation");

    } else {

      document.body.classList.remove("animation");

    }

  }, [show]);

當然，您必須為班級定義您的風格：


.animation {

  overflow: hidden;

}

請參閱此處的示例。 https://codesandbox.io/s/react-spring-scroll-fj6t8


這只是一個粗略的例子。您可以將 classList.remove 添加到 useEffect 的返回中?；蛘?，如果您想在動畫停止時將其移除，您可以嘗試將其添加到 useTransition 的 onRest 回調中。


查看完整回答
反對 回復 2022-01-20
  • 1 回答
  • 0 關注
  • 236 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號