如何使用JS播放动画

Question

我在悬停按钮上编码淡入淡出文本。。。我必须调用悬停动画。。。我该怎么做？

const button = document.getElementById("btn");
const disp_text = document.getElementById('disp_text');
button.onmouseover = function(){
//Here goes the animation to play
disp_text.innerText = "Next";
}

我尝试过：

const button = document.getElementById("btn");
const disp_text = document.getElementById('disp_text');
button.onmouseover = function(){
animation.Play("fadein");
disp_text.innerText = "Next";
}

但是什么都没有。。。

如果有人能帮忙，我将非常感激。。。

Answer 1

以下是一些代码，当按钮悬停时，这些代码使用javascript来设置淡入淡出的动画。我还实现了一个纯css版本。我打算使用Animate API实现一个版本，但我看到@DEEPAK已经实现了，所以这是第三个选项。

const button = document.getElementById("btn");
const disp_text = document.getElementById('disp_text');

button.onmouseover = function(){
disp_text.classList.add('button-hover');
}
button.onmouseout = function(){
disp_text.classList.remove('button-hover');
}

#disp_text {
opacity:0;
transition: opacity .25s ease-in-out;
}
#disp_text.button-hover {
opacity:1;
}
#disp_text2 {
opacity:0;
transition: opacity .25s ease-in-out;
}
#btn2:hover #disp_text2 {
opacity:1;
}

<button id='btn'>Hover over this to see the animation of the DIV below</button>
<p id='disp_text'>Next</p>
<p>The one below uses css only - no javascript. This is easy because the span is inside the button</p>
<button id='btn2'><span id='disp_text2'>Next</span></button>

Answer 2

.play()只有在您提到如何animate的情况下才能工作

const button = document.getElementById("btn");
const disp_text = document.getElementById('disp_text');
button.onmouseover = function(){
disp_text.innerText = "Next";

const animation = disp_text.animate(
[
{ opacity: 0 },
{ opacity: 1 }
], {
easing: 'ease',
duration: 2000
});
animation.play();
}

<button id="btn">Hello</button>
<p id="disp_text"></p>

Answer 3

我不知道你说的"animation.fadeIn"；。据我所知，没有一个物体被命名为"；动画"；香草JS。

编码淡入淡出动画的一种方法是使用CSS属性opacity。

如果你要用CSS编码这个动画，你可以做：

#btn {opacity: 0.5; }
#btn:hover {opacity: 1} 

如果这是你需要的，请告诉我。