开始一个 css 动画并使用 (fa-awesome) 以另一个图标结束

Question

使用普通 CSS 和 Javascript 我想：

创建一个 'fa-heart-o' 在单击时激活一个脉冲。
终于换回了一颗踏实的心'fa-heart'.
额外的点击应该从 'fa-heart' -> 动画 -> 'fa-heart-o'.

第一部分工作正常，在计时器重置 animate-stile 允许它 'replay'。但我不知道如何在 100% 动画之后切换到 'fa-heart-o' 是第 2 步？

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>

@keyframes fa-pulse-click {
  0%  { transform:scale(1); }
  50%  { transform:scale(1.50); }
  100% { transform:scale(1); }
}

.fa {
  font-size: 50px;
  cursor: pointer;
  user-select: none;
}

.fa:hover {
  color: gray;
}

body {
  text-align:center;
  background:white;
  color:black;
  font:1em sans-serif;
}

.heart {
  color:red;
}
</style>
</head>

<body>


<p>Click to pulse</p>
<span class="tooltip">
  <i id="pulse-click" onclick="startAni(this)" class="fa heart fa-heart-o fa-4x fa-pulse-click"></i>
</span>
</br>

<script>

var myHand = false;

function startAni(elem) {
    if (myHand) 
        clearTimeout(myHand);
    myHand = setTimeout(function(){ elem.style.animation = ''; }, 250);

    elem.style.animation = "fa-pulse-click 0.2s ease";
}
</script>


<p>Click on the icon to toggle between solid/open heart:</p>
<i onclick="myFunction(this)"class="fa heart fa-4x  fa-heart"></i>
<script>
    function myFunction(x) {
    x.classList.toggle("fa-heart-o");
    }
</script>

</body>
</html>

Answer 1

你只是错过了使用你的功能，而且你在类名中有错别字：

var myHand = false;

function startAni(elem) {
    if (myHand) 
        clearTimeout(myHand);
    myHand = setTimeout(function(){ animate(elem); }, 250);

    elem.style.animation = "fa-pulse-click 0.2s ease";
}

function animate(elem) {
  elem.style.animation = '';
  elem.classList.toggle("fa-heart-o");
  elem.classList.toggle("fa-heart");
}

@keyframes fa-pulse-click {
  0%  { transform:scale(1); }
  50%  { transform:scale(1.50); }
  100% { transform:scale(1); }
}

.fa {
  font-size: 50px;
  cursor: pointer;
  user-select: none;
}

.fa:hover {
  color: gray;
}

body {
  text-align:center;
  background:white;
  color:black;
  font:1em sans-serif;
}

.heart {
  color:red;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>


<p>Click to pulse</p>
<span class="tooltip">
  <i id="pulse-click" onclick="startAni(this)" class="fa heart fa-heart-o fa-4x fa-pulse-click"></i>
</span>
</br>


<p>Click on the icon to toggle between solid/open heart:</p>
<i onclick="myFunction(this)"class="fa heart fa-4x  fa-heart"></i>

</body>
</html>

开始一个 css 动画并使用 (fa-awesome) 以另一个图标结束

Start a css animation and finish with another icon using (fa-awesome)

html

javascript

css

jquery-animate