javascript - 为什么在使用 JQuery 时，当我悬停时，没有流畅的动画？

Question

我的 script.js 文件中有以下内容:

$(document).ready(function(){

  $( '.elementoBarra1').hover(
    function(){
        $(this).addClass('lineaBarraActive');
    },
    function(){
        $(this).removeClass('lineaBarraActive');
    }
  );

});

颜色发生了变化(根据我在样式表中给出的说明)，但没有动画(或过渡)。它只是二进制地传递到另一种颜色，没有动画在很短的时间内穿过中间的所有颜色。

这是为什么？

编辑:刚刚尝试了 fadeIn() 和 fadeOut() 并且它们工作正常，它们有流畅的动画。为什么 addClass() 和 removeClass() 不能正常工作？

Answer 1

Jquery 的

addClass 和removeClass api 不提供任何动画。它们仅用于添加或删除类。

如果你想实现动画，那么你必须在你添加的类中添加transition。

也不需要 jQuery。只需使用:hover伪选择器即可实现

.elementoBarra1 {
  background-color: black;
  width: 100px;
  height: 200px;
  -webkit-transition: background-color 1s linear;
  -moz-transition: background-color 100ms linear;
  -o-transition: background-color 1s linear;
  -ms-transition: background-color 1s linear;
  transition: background-color 1000ms linear;
}

.elementoBarra1:hover {
   background-color: red;
   -webkit-transition: background-color 1s linear;
   -moz-transition: background-color 100ms linear;
   -o-transition: background-color 1s linear;
   -ms-transition: background-color 1s linear;
   transition: background-color 1000ms linear;
}

DEMO