CSS可視性属性

1.問題

現在、パーソナルプロジェクトが行われています.コントローラボタンをスクロールしたいです.

一定の長さでスクロールするとスクロールコントローラボタンが表示され、スクロールしないと画面に表示されないことを実現しました.
最初に使用されたのはcssのdisplay属性です.
スクロール時はdisplay:blockを行い、一定スクロール未満の場合はdisplay:noneを行う.

そして、このボタンが表示されて消えると不透明値が徐々に変化するアニメーションをお届けしたいと思います。

したがって,transitionと不透明値を用いて以下のように実現した.
(reactとstyled-componsesのコードを使用します.)🔥

2.displayプロパティはアニメーションには適用されません🥺

(생략)
<ScrollBtnWrapper isDisplay={controllerShow}
  onClick={onScrollBtnClickHandler}>
          <ScrollButton className='up-btn'>∧</ScrollButton>
          <ScrollButton className='down-btn'>∨</ScrollButton>
        </ScrollBtnWrapper>
    
(생략)

const ScrollBtnWrapper = styled.div`
  position:fixed;
  width:5vh;
  height:15vh;
  right:4vw;
  bottom:7vh;
  transition: all 0.5s;
  ${(props)=> {
    if(!props.isDisplay) {
      return css`
        display:none;
        opacity:0;
      `
    }
  }}
`

しかし、目的のアニメーションは適用されず、displayプロパティのみが適用されるように、画面に断続的に表示されます.
この問題を解決するために、グーグル社はvisibilityという属性を発表した.

3.可視性プロパティを使用して解決!

display:noneプロパティはvisibility: hiddenに変更され、アニメーションも有効になりました.
Visibilityプロパティには、hidden, visible, collapseの3つの値があります.
詳細については、MDNを使用するとさらに役立ちます.
https://developer.mozilla.org/ko/docs/Web/CSS/visibility

4.可視性と表示の違い

MDNサイトを確認します.

上の内容を確認できます.visibility:hiddenを使用すると、そのスペースは変更されませんが、画面には表示されません.つまり、レイアウトは変わらない.
逆に、display:noneを使用すると、要素がまったく存在しないように、レイアウトが変化し、空間が一定に保たれません.
👉 この事実では、なぜdisplay属性がアニメーションを通過しなかったのか理解しにくい.

displayプロパティとtransitionプロパティの関係

1.レンダリングツリー

HTMLとCSSをグループ化するとDOMとCSSOMが生成され、両者を組み合わせて렌더링 트리が生成されます.
レンダーツリーは、スクリーンに出力する要素のレイアウトを計算し、スクリーンにレンダーするペイントプロセスの入力として処理します.
レンダーツリーでは、スクリーンに印刷する必要のないノード、CSSで非表示のノード(display: noneなど)が省略されています.

2.トランジション属性とレンダリングツリー

transitionは、任意の状態で特定のイベントをトリガすることを可能にし、任意の属性の変化は一定期間にわたって発生する.ただし、display:noneの状態でクラスを動的にdisplay:blockに変更すると、レンダーツリーにクラスが追加され、遷移の開始点は存在しません.そのため、視覚的には移行は役に立たないようだ.
参考ブログ:https://velog.io/@dev-tinkerbell/display-none%EC%9D%B4-transition%EC%9D%B4-%EC%95%88%EB%A8%B9%ED%9E%88%EB%8A%94-%EC%9D%B4%EC%9C%A0