Question

我一直试图让这个'按钮'（实际上是'div'）在悬停和'点击'上运行关键帧。目前它正在努力完美地悬停，但我无法弄清楚如何让“点击”/“活跃”以及悬停时起作用。我已经尝试了几个CSS和Jquery修复此功能，但我尝试过的任何内容似乎都不允许动画在悬停和点击上运行。

如何在单击按钮时运行关键帧？

$('.hvr-ripple-out-good').click(function() {
  $(this).toggleClass('fill-good');
});

.hvr-ripple-out-good {
  margin: 5px;
  width: 20px;
  height: 20px;
  padding: 10px;
  color: #ddd;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 50%;
}

.hvr-ripple-out-good:hover {
  color: #39CCCC;
  border-color: #39CCCC;
}


/* Ripple Out */

@-webkit-keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

@keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

.hvr-ripple-out-good {
  display: inline-block;
  vertical-align: middle;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

.hvr-ripple-out-good:before {
  content: '';
  position: absolute;
  border: rgba(0, 0, 0, 0.0) solid 2px;
  border-radius: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.hvr-ripple-out-good:hover:before,
.hvr-ripple-out-good:focus:before,
.hvr-ripple-out-good:active:before {
  -webkit-animation-name: hvr-ripple-out;
  animation-name: hvr-ripple-out;
  border-color: #39CCCC;
  animation-fill-mode: forwards;
}

.hvr-ripple-out-good:active {
  background-color: #61D6D6;
  -webkit-animation-name: hvr-ripple-out;
  animation-name: hvr-ripple-out;
}

.fill-good {
  background-color: #39CCCC; 
  color: #fff;
  border: 1px solid #fff;
}

.fill-good:hover {
  color: #fff;
  border: 1px solid #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

<div class="hvr-ripple-out-good"><i class="fas fa-arrow-right"></i></div>

Answer 1

根据这篇文章： https://css-tricks.com/restart-css-animation/

重新启动CSS动画的理想方法是克隆和替换元素。尝试使用此代码：

$('.hvr-ripple-out-good').click(function() {
     var el = $(this),  
     newone = el.clone(true);
     el.before(newone);
     el.remove();     
     newone.addClass('fill-good'); //This line is added just for styling
});

这是小提琴：https://jsfiddle.net/v0f3dnue/1/

Answer 2

好的，这就是重做动画的方法，

$('.hvr-ripple-out-good').click(function() {
     var el = $(this),  
     newone = el.clone(true);
     el.before(newone);
     $("." + el.attr("class") + ":last").remove();     
});

并在其末尾添加$(this).toggleClass('fill-good');，所以

$('.hvr-ripple-out-good').click(function() {
     var el = $(this),  
     newone = el.clone(true);
     el.before(newone);
     $("." + el.attr("class") + ":last").remove(); 
     $(this).toggleClass('fill-good');
});

段：

＆＃13;

$('.hvr-ripple-out-good').click(function() {
     var el = $(this),  
     newone = el.clone(true);
     el.before(newone);
     $("." + el.attr("class") + ":last").remove(); 
     $(this).toggleClass('fill-good');
});

＆＃13;

.hvr-ripple-out-good {
  margin: 5px;
  width: 20px;
  height: 20px;
  padding: 10px;
  color: #ddd;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 50%;
}

.hvr-ripple-out-good:hover {
  color: #39CCCC;
  border-color: #39CCCC;
}


/* Ripple Out */

@-webkit-keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

@keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

.hvr-ripple-out-good {
  display: inline-block;
  vertical-align: middle;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

.hvr-ripple-out-good:before {
  content: '';
  position: absolute;
  border: rgba(0, 0, 0, 0.0) solid 2px;
  border-radius: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.hvr-ripple-out-good:hover:before,
.hvr-ripple-out-good:focus:before,
.hvr-ripple-out-good:active:before {
  -webkit-animation-name: hvr-ripple-out;
  animation-name: hvr-ripple-out;
  border-color: #39CCCC;
  animation-fill-mode: forwards;
}

.hvr-ripple-out-good:active {
  background-color: #61D6D6;
  -webkit-animation-name: hvr-ripple-out;
  animation-name: hvr-ripple-out;
}

.fill-good {
  background-color: #39CCCC; 
  color: #fff;
  border: 1px solid #fff;
}

.fill-good:hover {
  color: #fff;
  border: 1px solid #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

<div class="hvr-ripple-out-good"><i class="fas fa-arrow-right"></i></div>

＆＃13;

Answer 3

重新启动动画的另一种方法是使用setTimeout()，如下所示。

请注意，我将动画分为.animate类。

$('.hvr-ripple-out-good').click(function() {
  var $this = $(this);
  $this.toggleClass('fill-good');
  $this.removeClass('animate');
  setTimeout(function(){
    $this.addClass('animate')
  })
});

.hvr-ripple-out-good {
  margin: 5px;
  width: 20px;
  height: 20px;
  padding: 10px;
  color: #ddd;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 50%;
}

.hvr-ripple-out-good:hover {
  color: #39CCCC;
  border-color: #39CCCC;
}


/* Ripple Out */

@-webkit-keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

@keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

.hvr-ripple-out-good {
  display: inline-block;
  vertical-align: middle;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

.hvr-ripple-out-good:before {
  content: '';
  position: absolute;
  border: rgba(0, 0, 0, 0.0) solid 2px;
  border-radius: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.animate:hover:before,
.animate:focus:before,
.animate:active:before {
  -webkit-animation-name: hvr-ripple-out;
  animation-name: hvr-ripple-out;
  border-color: #39CCCC;
  animation-fill-mode: forwards;
}

.animate:active {
  background-color: #61D6D6;
  -webkit-animation-name: hvr-ripple-out;
  animation-name: hvr-ripple-out;
}

.fill-good {
  background-color: #39CCCC; 
  color: #fff;
  border: 1px solid #fff;
}

.fill-good:hover {
  color: #fff;
  border: 1px solid #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

<div class="hvr-ripple-out-good animate"><i class="fas fa-arrow-right"></i></div>

或者像AarónBC。说，克隆并替换原始元素。我只是简化并纠正他提供的方法。

$('.hvr-ripple-out-good').click(function() {
  let $this = $(this)
      $this.toggleClass('fill-good')
      $this.before($this.clone(true)).remove();
});

.hvr-ripple-out-good {
  margin: 5px;
  width: 20px;
  height: 20px;
  padding: 10px;
  color: #ddd;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 50%;
}

.hvr-ripple-out-good:hover {
  color: #39CCCC;
  border-color: #39CCCC;
}


/* Ripple Out */

@-webkit-keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

@keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

.hvr-ripple-out-good {
  display: inline-block;
  vertical-align: middle;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

.hvr-ripple-out-good:before {
  content: '';
  position: absolute;
  border: rgba(0, 0, 0, 0.0) solid 2px;
  border-radius: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.hvr-ripple-out-good:hover:before,
.hvr-ripple-out-good:focus:before,
.hvr-ripple-out-good:active:before {
  -webkit-animation-name: hvr-ripple-out;
  animation-name: hvr-ripple-out;
  border-color: #39CCCC;
  animation-fill-mode: forwards;
}

.hvr-ripple-out-good:active {
  background-color: #61D6D6;
  -webkit-animation-name: hvr-ripple-out;
  animation-name: hvr-ripple-out;
}

.fill-good {
  background-color: #39CCCC; 
  color: #fff;
  border: 1px solid #fff;
}

.fill-good:hover {
  color: #fff;
  border: 1px solid #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

<div class="hvr-ripple-out-good"><i class="fas fa-arrow-right"></i></div>

css在悬停时运行关键帧并单击

3 个答案: