gpt4 book ai didi

jquery - 下一个按钮触发 Css 动画的

转载 作者:太空宇宙 更新时间:2023-11-04 11:21:17 25 4
gpt4 key购买 nike

我点击了网站内的动画。

目前一切都按计划进行,但存在可用性问题。

我已将动画设置为在div 框被单击 时激活。当用户没有直接点击 div 时,一切都会崩溃。

看看我创建的这个示例,请注意,如果您不单击圆圈,它就会遇到问题。 — https://jsfiddle.net/ym2f50pq/11/

我想知道的是,是否可以添加一个“下一步”按钮,一个接一个地激活每个动画。

HTML 看起来像这样:

<div class="z1 animation-1" style="background-image:url('name_of_image.jpeg')"></div>
<div class="z2 animation-2" style="background-image:url('name_of_image.jpeg')"></div>
<div class="z3 animation-3" style="background-image:url('name_of_image.jpeg')"></div>
<div class="z4 animation-4" style="background-image:url('name_of_image.jpeg')"></div>

CSS 看起来像这样:

.z1{ 
z-index:99;
}
.z2{
z-index:98;
}
.z3{
z-index:97;
}
.z4{
z-index:96;
}

.animation-1 {
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
position: absolute;
}
.is-open-animation-1 {
animation: animation_1 2s;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes animation_1 {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}

JS

  $('.animation-1').click(function () {
$(this).toggleClass('is-open-animation-1').one(animation.keyframes, function (e) {
$(this).remove();
});
});

我会通过添加 id 来做到这一点吗? id='01' 并以某种方式使用它来确定接下来播放哪个动画?

任何输入将不胜感激。

最佳答案

是的,可以通过为每个动画分配一个 ID 来轻松完成,例如animation-id,然后在单击“下一步”按钮时触发动画元素上的 .click() 事件。

工作 fiddle :https://jsfiddle.net/maxflex/ym2f50pq/14/

关于jquery - 下一个按钮触发 Css 动画的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32751383/

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