Question

我正在使用intersection object来显示带有名为movefromtop的动画的图像（将opacity从0更改为1，并将translating y的值）当用户到达插入点，添加一个class。我在同一张图片中有一个:hover动画（称为buzz）。问题：当用户离开（mouseout）图片时，第一个动画又来了（movefromtop），再次显示了图片intersection object animation。因此，这是一个动画CSS冲突。您可以在the page底部的instagram部分看到一个实时示例。我看到冲突只发生在同一个元素中的两个动画上，例如，如果我用transform: scale rotate替换其中的任何一个，就不会发生mouseout错误。

第一个动画：

.floating {
  opacity: 0;
  transition: 1s opacity;

}
.floating.show-bottom {opacity: 1;  
  animation: movefromtop 1s alternate infinite;
  animation-iteration-count: 1;
  animation-fill-mode:  forwards;}
@keyframes movefromtop {
  from {
    transform: translateY(-5em);
  }
  to {
    transform: translateY(0em);
  }
}

第二动画：

/* Buzz */
@-webkit-keyframes hvr-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
@keyframes hvr-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}


    .icons-info > *:hover img.floating {    animation-name: floating;
  -webkit-animation-name: hvr-buzz;
  animation-name: hvr-buzz;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
       }



@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    
}



@keyframes floating2 {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, -55px); }
    to   { transform: translate(0, -0px); }    
}

JS代码（但我认为不是必需的，因为这是CSS动画冲突：

const onEntry7 = animateSequence('.floating', 'show-bottom');
const observer7 = new IntersectionObserver(onEntry7);
const allElements7 = document.querySelectorAll('#staff div.with-img');
allElements7.forEach(e => observer7.observe(e));

function animateSequence(targetSelector, classToAdd, delay = 250) {
  const animatedElements = [];
  let chain = Promise.resolve();

  function show(e) {
    return new Promise((res, rej) => {
      setTimeout(() => {
        e.classList.add(classToAdd);
        res();
      }, delay);
    });
  }
  return function(entries) {
    entries.forEach(entry => {
      if (entry.intersectionRatio > 0) {
        const elem = entry.target.querySelector(targetSelector);
        if (!animatedElements.includes(elem)) {
          animatedElements.push(elem);
          chain = chain.then(() => show(elem));
          observer7.unobserve(entry.target);
        }
      }
    })
  }
}

HTML代码：

 <div class="container">
      <div class="row icons-info">
        <div class="with-img col-xs-12 col-xs-6 col-sm-6 col-md-6 col-lg-3">
          <img class="floating" src="https://lagaleramagazine.es/rucab/img/Muñeco 1-08.png" data--name="1">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros. </p>
        </div>
        <div class="with-img col-xs-12 col-xs-6 col-sm-6 col-md-6 col-lg-3 ">
          <img class="floating" src="https://lagaleramagazine.es/rucab/img/Muñeco 2-08.png" data--name="2">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros.</p>
        </div>
        <div class="with-img col-xs-12 col-xs-6 col-sm-6 col-md-6 col-lg-3 ">
          <img class="floating" src="https://lagaleramagazine.es/rucab/img/Muñeco 3-08.png" data--name="3">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros.</p>
        </div>
        <div class="with-img col-xs-12 col-xs-6 col-sm-6 col-md-6 col-lg-3">
          <img class="floating" src="https://lagaleramagazine.es/rucab/img/Muñeco 1-08.png" data--name="4">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros. </p>
        </div>
      </div>
    </div>

Answer 1

不幸的是，这是浏览器问题。

您可以通过将第二个动画提供给父级来避免这种情况。

看例子：https://codepen.io/freddyfy/pen/ZPMYGr

.image {
  width: 200px;
  position: relative;
}

.image img {
  width: 100%;
  display: block;
  position: relative;
  animation-name: aniIn;
  animation-duration: 1s;
  animation-timing-function: linear
}

.image:hover {
  animation-name: hover;
  animation-duration: .1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes hover {
  0%{
    left: 0;
  }
  100% {
    left: 20px;
  }
}

@keyframes aniIn {
  0% {
    top: -100px;
  }
  100% {
    top: 0;
  }
}

<div class="image">
  <img src="https://lagaleramagazine.es/rucab/img/Muñeco 3-08.png">
</div>

第二个动画打开：悬停时将鼠标悬停时重置第一个动画

1 个答案: