Question

我有以下代码：

let animation = document.getElementById('fave');
animation.addEventListener('click', function() {
  $(animation).toggleClass('animate');
});

.fave {
  width: 70px;
  height: 50px;
  position: relative;
  overflow: hidden;
}

.fave img {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  animation: test_animate_reverse 1s steps(55);
}

.fave .animate {
  animation: test_animate 1s steps(55);
  left: -3519px;
}

@keyframes test_animate {
  from {left: 0;}
  to {left: -3519px;}
}

@keyframes test_animate_reverse {
  from {left: -3519px;}
  to {left: 0;}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="fave"><img src="https://cssanimation.rocks/images/posts/steps/twitter_fave_rectangle.png" id="fave"></section>

目标图像为：https://cssanimation.rocks/images/posts/steps/twitter_fave_rectangle.png（尽管已修改，因此所有图像都水平放置）。

结果已经非常令人满意。但是，我担心：

可以看到，每当刷新浏览器窗口时，我的星星总是从所述图像的最后一帧动画到第一帧。如果可能的话，我希望它在第一次刷新窗口时不这样做，并且仅在将窗口从“活动”切换为“不活动”时才进行反向动画处理。
我觉得仅使用两个@keyframes来反转完全相同的动画是一种低效的方法。有没有一种方法可以实现相同的效果而不必进行额外的反向@keyframes？
当所说的section没有父母时，是否有一种方法可以实现相同的效果而无需明确指定section的大小？
当我在上述图像上快速单击几次时，如果可能的话，我希望它先完成其当前动画，然后再进行下一个动画。现在使用我的代码，当运行新动画时，先前的动画将立即结束。

编辑

通过更改以下内容，我尝试不使用反向@keyframes：

.fave img {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    animation: test_animate .7s steps(55);
    animation-direction: reverse;
}

发生的事情是动画完全消失了。

Answer 1

为什么不使用实际获得图像的tutorial中的代码。它使用transition而不是animation，看起来更整洁。

在将过渡应用于元素时，它也会自动反转动画。

您可以设置一个禁用标志，并使用setTimeout（）来防止在动画结束之前多次单击。

var click_disabled = false;

$('.fave').click(function() {
  
  if (click_disabled) {
    return; // do nothing
  }
	
  $(this).toggleClass('faved');
  
  // Set correct aria-label 
  var label = $(this).attr('aria-label') == 'Favourite' ? 'Unfavourite' : 'Favourite';
  
  $(this).attr('aria-label',label);
  
  click_disabled = true;
  
  // Timeout value should match transition length
  setTimeout(function(){
  	click_disabled = false;
  }, 1000);
    
});

.fave {
  background: none;
  border: 0;
  padding: 0;
  width: 70px;
  height: 45px;
  background: url(https://res.cloudinary.com/shanomurphy/image/upload/v1547543273/fave_ltre0q.png) no-repeat;
  background-position: 0 0;
  transition: background 1s steps(55);
  outline: 0;
  cursor: pointer;
}

.fave.faved {
  background-position: -3519px 0;
}

<button class="fave" aria-label="Favourite"></button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CSS动画-步骤-动画书签星

1 个答案: