如何使用JS检测CSS转换

Question

编辑

我试过动画开始和动画结束。我发现动画启动会立即触发，然后当关键帧达到100%动画结束触发器，并说动画已经完成。我想知道的是，是否有可能监控动画之间或内部发生的事情？比如监视每个关键帧？例如，在这个示例中，我正在运行4幅图像的动画，所以当每个图像在幻灯片中滑动时，我可以监视它和console.log(“传入图像或其他什么”)。是否可以像图像滑动时那样监视每个关键帧？

我在试着制作图像传送带。我已经设置了css动画，所以转换是在一个循环与css。然后，我添加了两个按钮的nextBtn和prevBtn。他们正在用他们的技巧在图像中滑动。但是我有一个问题，不能同时使用这两种功能--如果我尝试使用这两种功能--如果我多次按下这两种功能--它基本上会搞砸它，而css正在执行循环动画效果。因此，当转换已经从事件监听器"transitionstart“开始时，我尝试禁用按钮，但问题是，如果css正在执行转换动画，则javascript不能”听或听“。但是，如果我实际按下按钮，那么js就会启动事件侦听器，停止传递启动。那么，当css文件执行动画时，如何使javascript“听/听”呢？

以下是一些js转换启动事件侦听器代码

slideContainer.addEventListener('transitionstart', () => {
  console.log('transition has started') // it cant hear and is not listening when movement animation transition is comming from the css file but it fires up if i physically press the next button
  document.getElementById("prev").setAttribute('disabled', true);
  document.getElementById("next").setAttribute('disabled', true);
})

那么，如何使用javascript检测css动画转换呢？

我编写的html元素是：

    <div id="slider">
      <figure>
        <img src="./images/image-product-4.jpg" id="lastClone" alt="product-4" />      
        <img src="./images/image-product-1.jpg" id="product-1" alt="product-1" />
        <img src="./images/image-product-2.jpg" id="product-2" alt="product-2" />
        <img src="./images/image-product-3.jpg" id="product-3" alt="product-3" />
        <img src="./images/image-product-4.jpg" id="product-4" alt="product-4" />  
        <img src="./images/image-product-1.jpg" id="firstClone" alt="product-1" />
      </figure>
      
      <img id="next" class="next pointer" src="./images/icon-next.svg" alt="next-img">
      <img id="prev" class="previous pointer" src="./images/icon-previous.svg" alt="previous-img">
    </div>

与js文件开始时一样，我有以下逻辑跳过第一个id="lastClone“映像

const slideContainer = document.querySelector('figure');
const slideImages = document.querySelectorAll('figure img');
// counter
let counter = 1;
let size = slideImages[0].clientWidth;
slideContainer.style.transform = 'translateX(' + (-size * counter) + 'px)';

// then here I want to listen for transitionstart
slideContainer.addEventListener('transitionstart', () => {
  console.log('transition has started') // it cant hear and is not listening when movement happens from the css file
  document.getElementById("prev").setAttribute('disabled', true);
  document.getElementById("next").setAttribute('disabled', true);
})
// but it cant detect if the transition is done by the css animation

这是我的css

#slider {
  overflow: hidden;
}

#slider figure {
  width: 600%;
  /* width: 100%; */
  display: flex;
  margin: 0;
  left: 0;
  animation: 50s slider infinite;
  /* top: 50px; */
}

#slider figure img {
  float: left;
  width: 20%;
}

@keyframes slider {
  0% { left: 0; }
  20% { left: 0; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400% }
}

figure {
  position: relative;
  height: 20rem;
  overflow: hidden;
}

figure img {
  object-fit: fill;
  height: 100%;
}

我的代码的实例：

https://jsfiddle.net/CustomHaven/51mLatkr/34/

编辑

我试过动画开始和动画结束。我发现动画启动会立即触发，然后当关键帧达到100%动画结束触发器，并说动画已经完成。我想知道的是，是否有可能监控动画之间或内部发生的事情？比如监视每个关键帧？例如，在这个示例中，我正在运行4幅图像的动画，所以当每个图像在幻灯片中滑动时，我可以监视它和console.log(“传入图像或其他什么”)。是否可以像图像滑动时那样监视每个关键帧？

Answer 1

你可以试试：

element.ontransitionstart = () => {
  console.log('Started transitioning');
};

与元素是: getElementById ..。