Question

我正在研究一个使用Intersection Observer在输入时将动画添加到元素样式的项目。但是，我要注意的是，当我应用样式时，: hover属性不再起作用。我做错了吗，还是这两个不兼容？在JS小提琴上，默认情况下，我已注释掉hover属性。尝试取消注释，看看会发生什么。

我尝试过banner.classList.add(/new class in here/)，但是该方法也删除了:hover。 演示： Demo

Answer 1

在悬停时禁用动画，因为动画具有更高的特异性

const options = {
  root: null,
  threshold: 1,
};

const banner = document.querySelector('.product-banner');

const observerAnim = new IntersectionObserver(function(entries, observer) {

  entries.forEach(entry => {

    if (!entry.isIntersecting) {
      return;
    }
    banner.style.animation = '1s ease-in-out home-page-fade';
    banner.style.animationFillMode = 'forwards';
    observer.unobserve(banner);
  });

}, options);

observerAnim.observe(banner);

body {
  background-color: #fff;
  min-height: 2000px;
}

img.product-banner {
  opacity:0;
  position: relative;
  top: 1000px;
  -moz-transition: all ease 0.3s;
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;
}

@keyframes home-page-fade {
  0% {
    transform: translateY(50%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


img.product-banner:hover {
  animation: none !important;
  opacity: 0.8;
  transform: scale(0.9);
  -moz-transition: all ease 0.3s;
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;

}

<h1>
    Scroll Effect
  </h1>

  <img class="product-banner" src="https://cdn.mos.cms.futurecdn.net/bQgcMwEnyhFu6ASuUFrtsn-1024-80.jpg" width="300">

交叉口观察者动画和悬停效果不能一起使用吗？

1 个答案: