Question

点击button后，div元素会突出显示为绿色，然后绿色消失。

它可以工作，但它只能每隔一段时间。

第1次，第3次，第5次...单击动画发生的按钮的时间。
第二次，第四次，第六次...单击按钮时动画不会。

问题：如果每次点击该按钮，我该如何制作动画？

$('button').on('click', function(){
  $('div').toggleClass("success-highlight-animation");
});

/*********************************************/
/*********************************************/
/* Fades in success color, then fades it out */
.success-highlight-animation {
  -moz-animation: highlight 2s ease 0s 1 alternate ;
  -webkit-animation: highlight 2s ease 0s 1 alternate;
  animation: highlight 2s ease 0s 1 alternate;
}

@-webkit-keyframes highlight {
  from { background-color: #dff0d8;}
  to {background-color: white;}
}

@-moz-keyframes highlight {
  from { background-color: #dff0d8;}
  to {background-color: white;}
}
// end .success-highlight-animation
/*********************************************/
/*********************************************/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <button>click</button>


<div>
  When the button is clicked this shows a highlight that slowly fades away.
</div>

Answer 1

这是因为您在每次点击时切换班级，第一次点击切换班级，第二次点击将其切换为关闭。

您应该在2秒后自动关闭它，以便下次单击该按钮时，它可以再次打开它。

$('button').on('click', function(){
   $('div').addClass("success-highlight-animation");
   window.setTimeout(function(){
      $('div').removeClass('success-highlight-animation');
   }, 2000);
});

Answer 2

这是因为第2，第4等时间正在删除css类。第1，第3等正在添加它。动画结束后，您需要删除函数中的类。

＆＃13;

$('button').on('click', function(){
  setTimeout(function() {
    $('div').removeClass("success-highlight-animation");
  }, 2000);
  $('div').addClass("success-highlight-animation");
});

＆＃13;

/*********************************************/
/*********************************************/
/* Fades in success color, then fades it out */
.success-highlight-animation {
  -moz-animation: highlight 2s ease 0s 1 alternate ;
  -webkit-animation: highlight 2s ease 0s 1 alternate;
  animation: highlight 2s ease 0s 1 alternate;
}

@-webkit-keyframes highlight {
  from { background-color: #dff0d8;}
  to {background-color: white;}
}

@-moz-keyframes highlight {
  from { background-color: #dff0d8;}
  to {background-color: white;}
}
// end .success-highlight-animation
/*********************************************/
/*********************************************/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <button>click</button>


<div>
  When the button is clicked this shows a highlight that slowly fades away.
</div>

＆＃13;

Answer 3

您可以在webkitAnimationEnd上添加事件侦听器，并在动画结束后删除该类。

$('button').on('click', function(){
    $('div').addClass("success-highlight-animation");
});

var div = document.querySelector('div');

function callback() {
    div.classList.remove('success-highlight-animation');
}

div.addEventListener("webkitAnimationEnd", callback, false);

/*********************************************/
/*********************************************/
/* Fades in success color, then fades it out */
.success-highlight-animation {
  -moz-animation: highlight 2s ease 0s 1 alternate ;
  -webkit-animation: highlight 2s ease 0s 1 alternate;
  animation: highlight 2s ease 0s 1 alternate;
}

@-webkit-keyframes highlight {
  from { background-color: #dff0d8;}
  to {background-color: white;}
}

@-moz-keyframes highlight {
  from { background-color: #dff0d8;}
  to {background-color: white;}
}
// end .success-highlight-animation
/*********************************************/
/*********************************************/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <button>click</button>


<div>
  When the button is clicked this shows a highlight that slowly fades away.
</div>

Answer 4

这里的问题是div上的类仍处于活动状态，但动画已经运行。因此，每当您点击它时，您只会删除该课程 - 您不会再次播放动画。

你应该做的是添加课程，然后在两秒钟后将其删除。

可能有更优雅的解决方案，但这有效：

＆＃13;

$('button').on('click', function(){
  $('div').toggleClass("success-highlight-animation");
  setTimeout(function() {$('div').toggleClass("success-highlight-animation");}, 2000);
});

＆＃13;

/*********************************************/
/*********************************************/
/* Fades in success color, then fades it out */
.success-highlight-animation {
  -moz-animation: highlight 2s ease 0s 1 alternate ;
  -webkit-animation: highlight 2s ease 0s 1 alternate;
  animation: highlight 2s ease 0s 1 alternate;
}

@-webkit-keyframes highlight {
  from { background-color: #dff0d8;}
  to {background-color: white;}
}

@-moz-keyframes highlight {
  from { background-color: #dff0d8;}
  to {background-color: white;}
}
// end .success-highlight-animation
/*********************************************/
/*********************************************/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <button>click</button>


<div>
  When the button is clicked this shows a highlight that slowly fades away.
</div>

＆＃13;

$('button').on('click', function(){
  $('div').toggleClass("success-highlight-animation");
  setTimeout(function() {$('div').toggleClass("success-highlight-animation");}, 2000);
});

干杯！

突出显示动画仅在按下按钮时每隔一段时间工作

4 个答案: