我有一個(gè)網(wǎng)站內(nèi)的動(dòng)畫點(diǎn)擊。

目前，我一切都按計(jì)劃進(jìn)行，但是有一個(gè)可用性問題。

我已經(jīng)將動(dòng)畫設(shè)置為在單擊div框時(shí)激活。 當(dāng)用戶沒有直接點(diǎn)擊div時(shí)，一切都會(huì)崩潰。

看一下我創(chuàng)建的這個(gè)例子，注意如果你不點(diǎn)擊這個(gè)圓，它就會(huì)出現(xiàn)問題。—https://jsfiddle.net/ym2f50pq/11/

我很想知道的是，是否有可能添加一個(gè)“下一步”按鈕來一個(gè)接一個(gè)地激活每個(gè)動(dòng)畫。

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%);
  }
}

射流研究…

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

我會(huì)通過添加一個(gè)id比如id='01 '來決定下一個(gè)動(dòng)畫嗎？

任何意見都將不勝感激。

是的，通過給每個(gè)動(dòng)畫分配一個(gè)ID，例如animation-id，然后啟動(dòng)。每當(dāng)單擊“下一步”按鈕時(shí)，動(dòng)畫元素上的click()事件。

工作小提琴:https://jsfiddle.net/maxflex/ym2f50pq/14/