Блог

Главная - Вопросы по программированию - Запускаем анимацию css и заканчиваем другим значком, используя (fa-awesome)

Запускаем анимацию css и заканчиваем другим значком, используя (fa-awesome)

#javascript #html #css #jquery-animate

#javascript #HTML #css #jquery-анимировать

Вопрос:

Используя обычный CSS и Javascript, я хочу:

  1. Создайте ‘fa-heart-o’, который анимирует пульсацию при нажатии.
  2. и, наконец, измените на сплошное сердце «fa-heart».
  3. Затем следует выполнить дополнительный щелчок в обратном направлении от ‘fa-heart’ -> animate -> ‘fa-heart-o’.

Первая часть работает нормально, при сбросе режима анимации по таймеру, позволяя ей «воспроизводиться». Но я не могу понять, как переключиться на ‘fa-heart-o’ — это шаг 2) после 100% анимации?

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

Ответ №1:

Вы просто пропустили использование своей функции, и у вас опечатка в 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>

Комментарии:

1. Большое спасибо.. Я знал, что был близок к этому:-D