如何使用 JS 控制 CSS 过渡和动画?

Question

我有一个图像，当悬停一些文本时，它从不透明度 0 变为 1。我希望过渡是平滑的，类似于CSS过渡。无法真正弄清楚如何实现这一目标，因此任何帮助将不胜感激。

JavaScript 看起来像这样：

document.getElementById("text-hover").addEventListener("mouseover", imageTransition);
document.getElementById("text-hover").addEventListener("mouseout", imageTransitionOut);
function imageTransition() {
document.getElementById("pic").style.opacity = "1";
}
function imageTransitionOut() {
document.getElementById("pic").style.opacity = "0";
}

Answer 1

只需在 css 中定义过渡，当您在 javascript 中更改不透明度值时，它将触发：

#pic {
transition: opacity .3s;
opacity: 0;
}

你不需要改变你的JavaScript

更新

如果需要对多个属性进行动画处理，最好在 css 中定义动画，然后通过切换元素上的类从 javascript 触发它 CSS：

#pic {
transition: all .3s;
opacity: 0;
transform: scale(.1);
}
#pic.animate {
opacity: 1;
transform: scale(1);
}

JavaScript：

var textHover = document.getElementById("text-hover");
var pic = document.getElementById("pic");
textHover.addEventListener("mouseover", function() {
pic.classList.add('animate');
});
textHover.addEventListener("mouseout", function() {
pic.classList.remove('animate');
});