如何創建一個按鈕以在第一次單擊時通過 2 秒轉換更改 div 的位置，并在第二次單擊時將其恢復。
我這樣做了，但它并沒有把它帶回來。
var d = document.getElementById("button");
d.addEventListener('click', function() {
d.className = d.className " move";
});uj5u.com熱心網友回復：
更好的電話是 d.classList.toggle("transitionClassName")
我從左側 -> 右側和頂部 -> 底部位置之間的 CSS 過渡復制了過渡
var d = document.getElementById("button");
d.addEventListener('click', function() {
d.classList.toggle("move");
d.classList.toggle("right");
});.animate {
height: 100px;
width: 100px;
background-color: #c00;
transition: all 1s ease;
position: absolute;
cursor: pointer;
font: 13px/100px sans-serif;
color: white;
text-align: center;
}
/* ↓ just to position things */
.animate.left {
left: 0;
top: 50%;
margin-top: -100px;
}
.animate.right {
right: 0;
top: 50%;
}
.animate.top {
top: 0;
left: 50%;
}
.animate.bottom {
bottom: 0;
left: 50%;
margin-left: -100px;
}
.animate.left.move {
left: 100%;
transform: translate(-100%, 0);
}
.animate.right.move {
right: 100%;
transform: translate(100%, 0);
}
.animate.top.move {
top: 100%;
transform: translate(0, -100%);
}
.animate.bottom.move {
bottom: 100%;
transform: translate(0, 100%);
}<button type="button" id="button" class="animate">Move</button>uj5u.com熱心網友回復：
const d = document.getElementById("button");
d.style.transition = "0.8s";
d.addEventListener('click', function(event) {
event.target.classList.toggle("move");
});.move {
margin-left: 50px;
}<button id="button">Click Me!</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/418608.html
標籤：