点击按钮重复动画

Question

我想每次重复动画，当我点击我的按钮。我试图做点什么like this。

const dist = document.querySelector('.dist'); 
 

 
document.querySelector('button').addEventListener('click',() => { 
 
    dist.classList.remove('animation'); 
 
    dist.classList.add('animation'); 
 
});

.dist { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: black; 
 
    margin-bottom: 30px; 
 
} 
 

 
.animation { 
 
    transform: scale(1.5); 
 
    transition: transform 3s; 
 
}

<div class="dist"></div> 
 
<button type="button">Trigger Animation</button>

但实际上，这个片段做它只有一次。

dist.classList.remove('animation'); 
dist.classList.add('animation'); 

这部分不应该删除状态并从头开始动画吗？

Answer 1

正在批处理类更改。你应该要求一个动画帧添加类回元素：

window.requestAnimationFrame(function() { 
    dist.classList.add('animation'); 
}); 

const dist = document.querySelector('.dist'); 
 

 
document.querySelector('button').addEventListener('click',() => { 
 
    dist.classList.remove('animation'); 
 
    window.requestAnimationFrame(function() { 
 
    dist.classList.add('animation'); 
 
    }); 
 
});

.dist { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: black; 
 
    margin-bottom: 30px; 
 
} 
 

 
.animation { 
 
    transform: scale(1.5); 
 
    transition: transform 3s; 
 
}

<div class="dist"></div> 
 
<button type="button">Trigger Animation</button>

Docs for requestAnimationFrame

见updated Fiddle

Answer 2

Updated fiddle。

你应该给删除多余的时间将新类animation（只是一个小超时就可以了）之前：

dist.classList.remove('animation'); 

setTimeout(function(){ 
    dist.classList.add('animation'); 
},10); 

希望这有助于。

const dist = document.querySelector('.dist'); 
 

 
document.querySelector('button').addEventListener('click',() => { 
 
    dist.classList.remove('animation'); 
 

 
    setTimeout(function(){ 
 
    dist.classList.add('animation'); 
 
    },10); 
 
});

.dist { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: black; 
 
    margin-bottom: 30px; 
 
} 
 

 
.animation { 
 
    transform: scale(1.5); 
 
    transition: transform 3s; 
 
}

<div class="dist"></div> 
 
<button type="button">Trigger Animation</button>

Answer 3

这不起作用，因为没有针对动画发生的时间在那里。本质上，浏览器并没有注意到该类将被移除，因为该元素在被移除后立即获得它。没有时间让它看到变化，所以它不会动画。为了重复它，你需要给它一些时间来注意，setTimeout是一个很好的选择。

此外，如果你想它动画返回到较小的尺寸，你需要改变哪个类具有transition时间。如果你在增加的课程上有它，一旦它被删除，你就失去了时间，因此它会回到较小的尺寸。

如果您不关心动画返回，请保持您的css不变，并将超时更改为像100这样的更短的内容。

尝试做这样的事情：

const dist = document.querySelector('.dist'); 
 

 
document.querySelector('button').addEventListener('click',() => { 
 
    if(!dist.classList.contains('animation')){ 
 
    dist.classList.add('animation'); 
 
    } else { 
 
    dist.classList.remove('animation'); 
 
    // Add it back after 3 seconds; 
 
    setTimeout(function(){ 
 
     dist.classList.add('animation'); 
 
    }, 1000 * 3); 
 
    } 
 
});

.dist { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: black; 
 
    margin-bottom: 30px; 
 
    transition: transform 3s; 
 
} 
 

 
.animation { 
 
    transform: scale(1.5); 
 
}

<div class="dist"></div> 
 
<button type="button">Trigger Animation</button>