不透明度と変形を使用したCSSアニメーション

Question

先日興味深い記事を読んで、私はワークフローでそれを適用しようとしてきました。記載されている概念の

https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29#.5a2q978fv

一つだけ不透明度の要素をアニメーション化するというアイデアであると変換します。私はこの数日間にわたってこのアイデアを実装していて、かなり素晴らしいと感じています。

私が見てきた1つの問題は、ある要素が不透明度0にある場合、包含する親要素は依然として子要素の領域を適用します。私は、子要素をほとんど何も変えずにスペースを削除しようとしましたが、スペースは依然として永続的です。

この方法で誰かが働いていて、親要素をアニメートして子要素で成長させる方法についてアドバイスがありましたかどうか不思議でしたか？

function showHiddenBox() { 
 
    let hiddenBox = document.querySelector('.hiddenbox') 
 

 
hiddenBox.setAttribute('data-state', hiddenBox.getAttribute('data-state') === 'hidden' ? 'visible' : 'hidden'); 
 
}

.parentbox { 
 
    width: 200px; 
 
    background-color: #564d49; 
 
} 
 
.showingbox { 
 
    display: flex; 
 
    align-content: flex-start; 
 
    align-items: center; 
 
    justify-content: center; 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: #63cdff; 
 
} 
 
.hiddenbox { 
 
    width: 100%; 
 
    height: 100px; 
 
    transition: all 1s; 
 
    background-color: pink; 
 
} 
 
.hiddenbox[data-state="hidden"] { 
 
    opacity: 0; 
 
    transform: scaleY(.1) translateY(-50px); 
 
    transform-origin: top; 
 
} 
 
.hiddenbox[data-state="visible"] { 
 
    opacity: 1; 
 
}

<div class="parentbox"> 
 
    <div class="showingbox"> 
 
    <button onclick="showHiddenBox()">Click Me</button> 
 
    </div> 
 
    <div class="hiddenbox" data-state="hidden"></div> 
 
</div>

さらに私はこのスニペットを作成した自分自身を説明するために。不透明でアニメーションを作成し、親要素の茶色に表示されない部分を変形したいが、子を作成するときに親が展開されるようにしたい。

Answer 1

function showHiddenBox() { 
 
    let hiddenBox = document.querySelector('.hiddenbox') 
 

 
hiddenBox.setAttribute('data-state', hiddenBox.getAttribute('data-state') === 'hidden' ? 'visible' : 'hidden'); 
 
}

.parentbox { 
 
    width: 200px; 
 
    background-color: #564d49; 
 
} 
 
.showingbox { 
 
    display: flex; 
 
    align-content: flex-start; 
 
    align-items: center; 
 
    justify-content: center; 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: #63cdff; 
 
} 
 
.hiddenbox { 
 
    width: 100%; 
 
    height: 100px; 
 
    transition: all 1s; 
 
    background-color: pink; 
 
} 
 
.hiddenbox[data-state="hidden"] { 
 
    max-height: 0; 
 
    transform: scaleY(.1) translateY(-50px); 
 
    transform-origin: top; 
 
} 
 
.hiddenbox[data-state="visible"] { 
 
    max-height: 300px; 
 
}

<div class="parentbox"> 
 
    <div class="showingbox"> 
 
    <button onclick="showHiddenBox()">Click Me</button> 
 
    </div> 
 
    <div class="hiddenbox" data-state="hidden"></div> 
 
</div>

利用の最大の高さの代わりに、不透明度。最大高を誇張しすぎてどのようにあなたのために動作するかによって異なります。これは、あなたの望むことですか？