启动CSS动画，并使用fa-awesome结束另一个图标的显示

如何解决启动CSS动画，并使用fa-awesome结束另一个图标的显示

使用我想要的普通CSS和Javascript

创建一个“ fa-heart-o”，以便在点击时为脉冲添加动画。
最后变成一颗坚硬的心脏“ fa-heart”。
然后应从“ fa-heart”->设置动画->'fa-heart-o'反向单击。

第一部分运行良好，可以在计时器重置动画阶梯以使其“重播”。但是我不知道如何在100％动画后的步骤2）中切换到“ fa-heart-o”？

<!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>

解决方法

您只是想使用功能而已，并且在className中输入错误：

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结束另一个图标的显示

如何解决启动CSS动画，并使用fa-awesome结束另一个图标的显示

解决方法

相关推荐