我試圖防止 div 大小立即擴大。
我試過使用，transition-duration但它不起作用。
您可以嘗試按下按鈕以立即查看 div 展開。
如何讓速度不立即改變？
var container = document.getElementById("test");
function up() {
container.style.width="300px";
}
function down() {
container.style.width="120px";
}.ct {
display: flex;
flex-direction: row;
transition-duration: 0.6s;
}
#test {
width: 120px;
height: 120px;
background-color: grey;
}<div class="ct">
<button onclick="up()">up</button>
<button onclick="down()">down</button>
</div>
<div id="test"></div>uj5u.com熱心網友回復：
您必須向#test 元素添加過渡。像下面這樣：
var container = document.getElementById("test");
function up() {
container.style.width="300px";
}
function down() {
container.style.width="120px";
}.ct {
display: flex;
flex-direction: row;
}
#test {
width: 120px;
height: 120px;
background-color: grey;
transition-duration: 0.6s;
transition: ease width 0.2s;
}<div class="ct">
<button onclick="up()">up</button>
<button onclick="down()">down</button>
</div>
<div id="test"></div>uj5u.com熱心網友回復：
您可以使用 CSS 在該 div 上添加過渡效果。
如下所示
#test {
transition: width 2s ease 0s;
}
uj5u.com熱心網友回復：
var container = document.getElementById("test");
function up() {
container.style.width="300px";
}
function down() {
container.style.width="120px";
}.ct {
display: flex;
flex-direction: row;
}
#test {
width: 120px;
height: 120px;
background-color: grey;
transition: width 1s linear 0s;
}<div class="ct">
<button onclick="up()">up</button>
<button onclick="down()">down</button>
</div>
<div id="test"></div>嘗試使用線性并圍繞過渡速度進行播放。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/403289.html
標籤：