使用不透明度和變換的CSS動畫

Question

我前幾天讀了一篇有趣的文章，並試圖將其應用到我的工作流程中。

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

一個被提到的概念是隻動畫元素的不透明度和變換的思想。過去幾天我一直在實施這個想法，並發現它非常棒。

我遇到過的一個問題是，如果元素處於不透明度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>

使用最大高度，而不是不透明度。過度誇大最大高度。取決於它如何爲你工作。這是你想要的嗎？