transformを使用すると、スケールがdivを適切に隠していません

Question

アニメーションでdivを非表示にしようとしています。これで私の最初のパスは、次のように見えた：これは仕事をしたものの

<div className={styles.container}> 
    <div className={styles.row} /> 
    <div className={classnames(styles.row, { [styles.hidden]: !this.state.active })} 
</div> 

が、それは非常に遅かった：私のDOM構造が（反応して）以下の通りであった

.row { 
    height: 50px; 
    transition: height 200ms ease-in-out; 
    &.hidden { 
    height: 0; 
    } 
} 

。私は変換がCSSで効率的に移行することを聞いたので、代わりに次のことを試してみることにしました。

.row { 
    height: 50px; 
    transform-origin: top; 
    transition: transform 200ms ease-in-out; 

    &.hidden { 
    transform: scaleY(0); 
    } 
} 

しかし、容器内に、2行目は50pxボックスとして表示がまだあるが、検査員は、それが0の高さを有していることを言います。

2番目のボックスを非表示にするには、この変換をどのように正しく適用できますか？

Answer 1

3D変換は効率的です。ブラウザはターゲット要素を独自のレイヤーに合成し、アニメーションをGPUにオフロードするためです。 height、さらにscaleY()は3D変換ではなく、GPUアクセラレーションの恩恵を受けません（CPUはまだそれを処理します）。 heightに戻ってあなたの例に行き

、あなたはtransform: translateZ(0);ようtransformプロパティを偽でそれをだましことにより、GPUアクセラレーションを使用するようにブラウザを強制することができます（translateZ()は、3Dコンポーネントof scale3d()あるくらいscaleZ()のように、translate3d()の3Dコンポーネントです） 。ここで

クイックデモです：追加プロパティで

document.querySelector('button').addEventListener('click', function() { 
 
    document.querySelector('.row').classList.toggle('hidden'); 
 
});

.row { 
 
    background-color: green; 
 
    height: 50px; 
 
    overflow: hidden; 
 
    transition: height 200ms ease-in-out; 
 
    transform: translateZ(0); /* or translate3d(0,0,0), rotateZ(360deg), etc. */ 
 
} 
 

 
.row.hidden { 
 
    height: 0; 
 
} 
 

 
button { 
 
    left: 0; 
 
    position: absolute; 
 
    top: 100px; 
 
}

<div class="row">Some text</div> 
 

 
<button>Toggle Row Visibility</button>

、ブラウザが大幅にアニメーションを改善し、GPUアクセラレーションを利用する必要があります。変換とGPUアクセラレーションに関する詳細については、this questionを参照してください。

まず、アプリでアニメーションのスピードを上げるかどうかを確認することをおすすめします。代わりにwill-changeプロパティを追加することもできますが、これは現在作業中のドラフトの一部であり、現在は非標準です。