gpt4 book ai didi

css - 单击时更改的带有 css 的动画

转载 作者:行者123 更新时间:2023-12-04 04:02:47 26 4
gpt4 key购买 nike

我正在为网站制作动画。

我的客户想要一些图片。

这些图像必须在加载时不断翻译,但当我点击该行时,图像必须以指数函数加速 4 秒:之后,网站必须换页。

昨天我创建了动画,每隔几毫秒改变一次动画持续时间,该策略非常有效,但我不喜欢那样,因为它似乎太重了。

现在我找到了另一种解决方案,它只使用 css 和一个钩子(Hook)来更改类。鉴于这个新的解决方案,我仍然有 2 个问题:

  1. 点击后,动画重新开始
  2. 动画的第二部分从开始而不是从动画的第一部分开始计算延迟

谢谢你的回复

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>

最佳答案

而不是依赖于 animation-delay 来排队这两个动画,你可以在 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
});

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

关于css - 单击时更改的带有 css 的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62832730/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com