從底部開始Div高度動畫方向問題

我正在使用文本頂部的after元素處理一些文本填充動畫，併爲其製作填充動畫的高度。從底部開始Div高度動畫方向問題

它對我的：after元素的絕對位置和最高位置0有很好的效果。但是如果我想製作高度相同的動畫，但是從底部到頂部反方向，我應該將0改爲底部0.

這就是問題出現的位置，my：after元素在我的下面文本塊？

這裏是我的代碼：https://codepen.io/1conu59/pen/zdVXOP

.text { 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 12em; 
 
    font-weight: 700; 
 
    position: relative; 
 
    display: inline-block; 
 
    background-color: black; 
 
    color: #fff; 
 
} 
 

 
.text:after { 
 
    transition: all 1s ease; 
 
    content: attr(data-content); 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    color: black; 
 
    width: 100%; 
 
    height: 0%; 
 
    overflow: hidden; 
 
    *background-color: black; 
 
    z-index: 1000; 
 
} 
 

 
.text:hover:after { 
 
    height: 100%; 
 
    border-radius: 0px; 
 
}

<div class="text" data-content="Grandioso"> 
 

 
\t Grandioso 
 

 
</div>

嘗試改變頂部0 0底部的的.text：之後，看到了問題

感謝您的幫助！

編輯：如果你仔細觀察，我認爲還有一些瀏覽器小故障的問題。它在動畫完成時圍繞文本顯示一個0.5像素的行，並且僅在您從0％到100％而非100％到0％設置動畫時纔會顯示。你有什麼想法如何解決這個問題？我使用文字陰影，但結果不是很好...

來源

2017-09-10 GordonFreeman

查看下面的代碼段查看您的答案。我只是將您的height屬性更改爲100％到0％的動畫效果，並更改了默認顏色，之後顏色變爲100％後的高度。希望能幫助到你。

.text { 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 12em; 
 
    font-weight: 700; 
 
    position: relative; 
 
    display: inline-block; 
 
    color:#39A966; 
 
} 
 

 
.text:after { 
 
    transition: all 1s ease; 
 
    content: attr(data-content); 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    color: #000; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    *background-color: black; 
 
    z-index: 1000; 
 
} 
 

 
.text:hover:after { 
 
    height: 0%; 
 
    border-radius: 0px; 
 
}

<div class="text" data-content="Grandioso"> 
 

 
    Grandioso 
 

 
</div>

來源

2017-09-10 12:19:47

哈哈，你只需切換邏輯嗎？哈弗現在隱藏了錯誤的顏色！我怎麼錯過了？有時候我對這個工作人員感覺很糟糕......是的，這兩天以來我對此非常感興趣！非常感謝！ – GordonFreeman

還有一個瀏覽器故障，你的方式修復它！但是，也許你知道某件事情可以用另一種方式解決它。因爲你從100％開始，兩個文本的大小完全相同，填充動畫是完美的。另一種方式，當你從0％開始時，你會在背景中出現一段奇怪的0.5像素的文字，這個文字的顏色文字是怎麼解決的？ – GordonFreeman

我編輯了我的第一篇文章，以便更清楚地看到瀏覽器問題。 – GordonFreeman

從底部開始Div高度動畫方向問題

回答

相關問題