CSS動畫向下而不是向上

簡而言之，我有三個div容器與border。每個內部都有一個div，背景色設置爲100%寬度和高度。這個想法是，當我點擊它們時，水應該從上到下排空。我通過將內部div的高度從100%切換到0%來做到這一點。然而，這當然會讓水浮出水面。所以我一直在尋找下午的大部分時間，並沒有拿出任何東西。我正在尋找最簡單的方法，只是讓它倒退或翻轉y軸，因爲它的面對它不可能那麼困難，可以嗎？CSS動畫向下而不是向上

無論如何，這是一個代碼筆，因爲jsfiddle希望允許css動畫，我正在試圖做的事情。 https://codepen.io/anon/pen/NgYEKE

function func1(buttonname) { 
 
    var x = document.getElementById(buttonname).className; 
 

 
    if (x = "full") { 
 
     document.getElementById(buttonname).className = "empty"; 
 
    } else { 
 
     document.getElementById(buttonname).className = "full"; 
 
    } 
 
}

.full { 
 
    height: 100%; 
 
    transition:height 2s; 
 
} 
 

 
.empty { 
 
    height: 0%; 
 
    transition: height 2s; 
 
}

<body style="background-color:black;"> 
 
    <div style="display:flex;justify-content:center;align-content:center;"> 
 
     <div id="glass1" style="height:50px;width:25px;border:2px solid blue;margin: 3px;"> 
 
      <div id="water1" class="full" style="width:100%;background-color:aqua;"></div> 
 
     </div> 
 
     <div id="glass2" style="height:50px;width:25px;border:2px solid blue;margin: 3px;"> 
 
      <div id="water2" class="full" style="width:100%;background-color:aqua;"></div> 
 
     </div> 
 
     <div id="glass3" style="height:50px;width:25px;border:2px solid blue;margin: 3px;"> 
 
      <div id="water3" class="full" style="width:100%;background-color:aqua;"></div> 
 
     </div> 
 
    </div> 
 
    <div style="display:flex;justify-content:center;align-content:center;"> 
 
     <button id="button1" onclick="func1(this.innerHTML)">water1</button> 
 
     <button id="button2" onclick="func1(this.innerHTML)">water2</button> 
 
     <button id="button3" onclick="func1(this.innerHTML)">water3</button> 
 
    </div> 
 
</body>

在一個側面說明我也相信我已經正確地寫入了Javascript將空和滿類之間進行切換，但似乎只是工作的一種方式，如果你有任何想法我做錯了，這也會有所幫助。

來源

2017-07-02 Simon Green

兩件事：

1）在if條件它必須是x == "full"代替x = "full"

2。）在下面的代碼片段中，我將「water」定義爲定位元素，其設置爲top: 0px; bottom: 0; right: 0; left: 0（沒有height設置）並且動畫/轉換了top設置，因此bottom始終保持爲0。現在，「水」從頂部倒空，您還可以通過從下到上的另一次點擊「補充」。（我也感動從內嵌於外部的CSS，使其更容易理解，BTW）

function func1(buttonname) { 
 
\t var x = document.getElementById(buttonname).className; 
 

 
\t if ((x == "full")) { 
 
\t \t document.getElementById(buttonname).className = "empty"; 
 
\t } else { 
 
\t \t document.getElementById(buttonname).className = "full"; 
 
\t } 
 
}

body { 
 
\t background-color: black; 
 
} 
 
#glass1, #glass2, #glass3 { 
 
\t position: relative; 
 
\t height: 50px; 
 
\t width: 25px; 
 
\t border: 2px solid blue; 
 
\t margin: 3px; 
 
} 
 
.full { 
 
\t position: absolute; 
 
\t top: 0px; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t transition: all 2s; 
 
\t background-color: aqua; 
 
} 
 
.empty { 
 
\t position: absolute; 
 
\t top: 100%; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t transition: all 2s; 
 
\t background-color: aqua; 
 
}

<div style="display:flex;justify-content:center;align-content:center;"> 
 
<div id="glass1"> 
 
<div id="water1" class="full" ></div> 
 
</div> 
 
<div id="glass2"> 
 
<div id="water2" class="full" ></div> 
 
</div> 
 
<div id="glass3"> 
 
<div id="water3" class="full"></div> 
 
</div> 
 
</div> 
 
<div style="display:flex;justify-content:center;align-content:center;"> 
 
<button id="button1" onclick="func1(this.innerHTML)">water1</button> 
 
<button id="button2" onclick="func1(this.innerHTML)">water2</button> 
 
<button id="button3" onclick="func1(this.innerHTML)">water3</button> 
 
</div>

來源

2017-07-03 00:03:42 Johannes

這是最全面的答案，動畫也是更強大的選項。唯一的缺點是它需要知道容器的高度。那些尋找容器高度未知的替代方案的人應該看看Aziz的文章中概述的ScaleY選項。但請注意，在轉換完成之前，scaleY解決方案存在切換類的問題。 –

@SimonGreen在你的評論之後，我再次編輯了我的代碼片段：代替頂部的px值（空的時候），你可以使用'top：100％'，所以實際上你*不必*知道容器的高度。 – Johannes

元素高度從上到下按設計開始，您可以使用scaleY轉換來替代，同時聲明bottom transform-origin。

演示

div { 
 
    height: 200px; 
 
    width: 50px; 
 
    border: 1px solid; 
 
} 
 

 
div div { 
 
    height: 100%; 
 
    background: blue; 
 
    transform-origin: bottom; 
 
    transition: transform 2s; 
 
} 
 

 
div div:hover { 
 
    transform: scaleY(0); 
 
}

<div> 
 
    <div></div> 
 
</div>

來源

2017-07-02 19:49:32 Aziz

謝謝阿齊茲，這讓我在正確的軌道上。我似乎已經非常專注於轉變高度，我並不認爲尋找其他方式來做到這一點，而只是如何做到這一點一旦兩個類被設置爲從底部和縮放一切都起作用的變換。 –

您可以將玻璃元素的相對位置和水元素從底部

.glass { 
    position: relative; 
} 

.water { 
    position: absolute; 
    bottom: 0px; 
}

絕對位置和應用此班到你這樣的元素：

<div class="glass" id="glass1" style="height:50px;width:25px;border:2px solid blue;margin: 3px;"> 
    <div class="water" id="water1" class="full" style="width:100%;background-color:aqua;"></div> 
    </div>

也有是在點擊功能的錯誤，

if (x = "full"){

被分配變量，應該使用==來比較。我想這是一個演示文稿錯別字

來源

2017-07-02 20:06:50 Sergio10

謝謝塞爾吉奧，這是我的不好，我幾乎沒有使用JavaScript，所以只是試圖應用其他編程邏輯。 –

如果你錯了，你總是設置full狀態。改變比較它完美的作品。

function func1(buttonname) { 
 
    var x = document.getElementById(buttonname).className; 
 

 
    if (x == "full") { 
 
     document.getElementById(buttonname).className = "empty"; 
 
    } else { 
 
     document.getElementById(buttonname).className = "full"; 
 
    } 
 
}

.full { 
 
    height: 100%; 
 
    transition:height 2s; 
 
} 
 

 
.empty { 
 
    height: 0%; 
 
    transition: height 2s; 
 
}

<body style="background-color:black;"> 
 
    <div style="display:flex;justify-content:center;align-content:center;"> 
 
     <div id="glass1" style="height:50px;width:25px;border:2px solid blue;margin: 3px;"> 
 
      <div id="water1" class="full" style="width:100%;background-color:aqua;"></div> 
 
     </div> 
 
     <div id="glass2" style="height:50px;width:25px;border:2px solid blue;margin: 3px;"> 
 
      <div id="water2" class="full" style="width:100%;background-color:aqua;"></div> 
 
     </div> 
 
     <div id="glass3" style="height:50px;width:25px;border:2px solid blue;margin: 3px;"> 
 
      <div id="water3" class="full" style="width:100%;background-color:aqua;"></div> 
 
     </div> 
 
    </div> 
 
    <div style="display:flex;justify-content:center;align-content:center;"> 
 
     <button id="button1" onclick="func1(this.innerHTML)">water1</button> 
 
     <button id="button2" onclick="func1(this.innerHTML)">water2</button> 
 
     <button id="button3" onclick="func1(this.innerHTML)">water3</button> 
 
    </div> 
 
</body>

來源

2017-07-02 23:24:05

CSS動畫向下而不是向上

回答

相關問題