Question

如果这是一个简单的问题，我事先表示歉意，但是我是一个新手，并且很难解决在鼠标悬停时触发CSS转换时发生的故障。

我正在使用JS根据鼠标在屏幕上的位置来触发彩色和背景图像的反转。如果用户将鼠标移到屏幕底部50％，则JS会在标签中添加“白色”类。

这会更改页面上所有文本的颜色并加载不同的背景图片。

我认为我面临两个问题：

在初始页面加载后，过渡闪烁一次。我认为这可能是因为未预加载图像。我不确定在当前情况下如何轻松地做到这一点。
在屏幕的下半部和上半部之间快速移动时，我注意到相同类型的闪烁行为。但是，当我允许过渡完成时，我可以在两种状态之间平稳地移动而不会闪烁。我不明白是什么原因导致了这种不一致的行为。

<style>
#home {
  background-color: #191919;
  background: url(../img/Profile1.jpg) no-repeat center center fixed;
  background-size: cover;
  transition:         all 900ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

#home.white{
  background-color: white;
  background: url(../img/Profile2.jpg) no-repeat center center fixed;
  background-size: cover;
}
</style>

<div id="split-container">
  <div class="split-top">
    <div class="container-s">
      <div class="row">
        <div class="col-12">
          <h1 class="center offwhite">A UI/UX designer dedicated to creating thoughtful digital experiences.</h1>
        </div>
      </div>
    </div>
  </div>    
  <div class="split-bottom invert-trigger">
    <div class="container-s">
      <div class="row">
        <div class="col-12">
          <h1 class="center offblack">An avid traveller seeking new perspectives and meaningful connections.</h1>
        </div>
      </div>
    </div>
  </div>
</div>  

<script>
   winWidth=$(window).width();
      if (winWidth >=752) {

      $('.invert-trigger').hover(function(){
        $('body').addClass('white');
      }, function(){
        $('body').removeClass('white');
      });
      $('.invert-trigger').hover(function(){
        $('.invert').addClass('black');
      }, function(){
        $('.invert').removeClass('black');
      });
    }         
  });
</script>

感谢您为解决这些挑战所提供的帮助！

Answer 1

在这种情况下，“快速”是指您在过渡完成之前移动鼠标的时间。有很多方法可以解决这个问题。

一个示例是切换指示动画是否准备就绪的参数。然后，您可以在启动动画时将参数切换为ready = false并使用setTimeout()来切换回动画。这样，动画将始终完成，然后您才能再次触发它。

Answer 2

我倾向于在您的body标签上使用:before伪元素，并为其应用替代颜色和背景图像，并且不透明度为零，并在悬停处理程序中切换不透明度。它将位于您其他内容的后面。然后，映像将（希望根据大小和网络速度）在初始过渡之前加载。

Answer 3

我对您的脚本进行了一些更改。我希望它对您仍然可读。

$(document).ready(function() {
    if($(window).width() >= 752) {
        $('.invert-trigger').on('mouseover', function() { // One .mouseover() event
            $('body').addClass('white');
            $('.invert').addClass('black');
        }).on('mouseout', function() {  // One .mouseout() event
            $('body').removeClass('white');
            $('.invert').removeClass('black');
        });
    }
});

图像的闪烁来自图像尚未加载到DOM中。这可以通过预加载图像来解决。

var img = new Image();
img.src = 'your_image_url.jpg';

希望这对您有所帮助。

CSS Transition Flicker替换背景图像并反转文本

3 个答案: