带有CSS的动画，点击后会发生变化 [英] Animation with css that changes on click

问题描述

我正在为网站制作动画。

我的客户想要一行包含一些图像。

这些图像必须不断翻译加载时，但是当我单击该行时，图像必须作为指数函数加速4秒：此后，网站必须更改页面。

昨天我创建了动画，通过一个钩子每隔几毫秒更改一次动画持续时间，该策略就可以很好地工作，但是我不喜欢这样做，因为它似乎太笨重了。仅使用css和一个钩子来更改类。
使用此新解决方案，我仍然有2个问题：

1. 单击后动画将重新启动


2. 动画的第二部分从开始而不是动画的第一部分计算延迟

感谢您的答复

  const row = document.querySelector（。row）; 
 row.addEventListener（ click，（）=> row.classList.add（'row-click'））;  

  .row {
 display：flex; 
 flex-direction：row; 
溢出：隐藏； 
} 
 
 .cell {
背景：＃f00; 
颜色：#fff; 
 font-size：26px; 
 min-width：100px; 
 margin-right：12px; 
动画：幻灯片优先级桌面10s线性无限； 
} 
 
 .row-click> .cell {
动画：
幻灯片第一桌面5s三次方贝塞尔（1,0，.74,1），
幻灯片第一桌面2s线性无限； 
} 
 @keyframes幻灯片优先桌面{
 0％{
 transform：translateX（0px）; 
} 
 100％{
 transform：translateX（-1680px）; 
} 
}  

 < div class = row> 
< div class = cell> 1< / div> 
< div class = cell> 2< / div> 
< div class = cell> 3< / div> 
< div class = cell> 4< / div> 
< div class = cell> 5< / div> 
< div class = cell> 6< / div> 
< div class = cell> 7< / div> 
< div class = cell> 8< / div> 
< div class = cell> 9< / div> 
< div class = cell> 10< / div> 
< div class = cell> 11< / div> 
< div class = cell> 12< / div> 
< div class = cell> 13< / div> 
< div class = cell> 14< / div> 
< div class = cell> 15< / div> 
< div class = cell> 1< / div> 
< div class = cell> 2< / div> 
< div class = cell> 3< / div> 
< div class = cell> 4< / div> 
< div class = cell> 5< / div> 
< div class = cell> 6< / div> 
< div class = cell> 7< / div> 
< div class = cell> 8< / div> 
< / div>  

解决方案

您可以使用JavaScript监听动画事件，而不必依靠 animation-delay 来排队这两个动画。 /developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/animationstart_event rel = nofollow noreferrer> https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/ animationstart_event

  const animation = document.querySelector（'p.animation'）; 
 
 animation.addEventListener（'animationstart'，（）=> {
 console.log（'animation starting'）; 
 animation.classList.add（'animation-running '）; 
 // //做某事
}）; 
 
 animation.addEventListener（'animationend'，（）= >> {
 console.log（'animation end'）; 
 animation.classList.remove（'animation-running '）; 
 // //做某事
}）; 
  

在此示例中，我使用事件来切换动画运行类。您可以使用它来检查动画是否正在运行，并防止在单击时重新启动它。

I’ m doing an animation for a website.

My client wants a row with some images.

These images have to translate constantly on load, but when I click in the row, the images must accelerate as an exponential function for 4 seconds: after that, the website must change page.

Yesterday I have created the animation, changing the animation-duration every some millis by an hook, that strategy was working perfectly, but I don’t like that because it seems to be too heavy.

Now I have found another solution that uses only css and an hook to change the class. Given this new solution, I still have 2 issues:

1. after the click, the animation restarts
2. the second part of the animation calculates the delay from the start and not from the first part of animation

Thank you for your reply

const row = document.querySelector(".row");
row.addEventListener("click", () => row.classList.add('row-click'));

.row{
  display: flex;
  flex-direction:row;
  overflow: hidden;
}

.cell{
  background:#f00;
  color:#fff;
  font-size:26px;
  min-width:100px;
  margin-right:12px;
  animation: slide-first-desktop 10s linear infinite;
}

.row-click > .cell{
  animation:
    slide-first-desktop 5s cubic-bezier(1,0,.74,1),
    slide-first-desktop 2s linear infinite;
}
@keyframes slide-first-desktop {
  0%{
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-1680px);
  }
}

<div class="row">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>
  <div class="cell">13</div>
  <div class="cell">14</div>
  <div class="cell">15</div>
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
</div>

解决方案

Instead of relying on the animation-delay to queue the two animations, you can listen to animation events in JavaScript: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationstart_event

const animation = document.querySelector('p.animation');

animation.addEventListener('animationstart', () => {
  console.log('animation started');
  animation.classList.add('animation-running');
  // do something
});

animation.addEventListener('animationend', () => {
  console.log('animation ended');
  animation.classList.remove('animation-running');
  // do something
});

In the example, I'm using the events to toggle a animation-running class. You could use this to check if an animation is running and prevent to restart it on click.

这篇关于带有CSS的动画，点击后会发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！