Невозможно применить переход All при добавлении и удалении класса с помощью вспомогательного класса - PullRequest
Новая
       10

Невозможно применить переход All при добавлении и удалении класса с помощью вспомогательного класса

0 голосов
/ 30 сентября 2018

Я пытаюсь добавить переход при добавлении и удалении (переключении) к классам .fa-heart-o и .fa-heart и использую вспомогательный класс с именем .fa-heart-slow, например, так.но, как вы видите, .fa-heart-slow не добавляет туда никакого перехода.Можете ли вы дать мне знать, как это исправить? 

$(".table").hover(function() {
  $(this).find(".fa").removeClass('fa-heart-o').addClass('fa-heart fa-heart-slow');

}, function() {
  $(this).find(".fa").removeClass('fa-heart-slow fa-heart').addClass('fa-heart-o');

});
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
body {
  padding: 20px;
}

.fa-heart-slow {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tr>
    <td><i class="fa fa-heart-o" aria-hidden="true"></i></td>
  </tr>

</table>

1 Ответ

0 голосов
/ 01 октября 2018

Я не верю, что это работает так, как вы намереваетесь, поскольку переключение классов .fa эффективно переключает свойство content элемента, а свойство content не относится к числу тех, которые поддерживаются в анимации перехода в спецификации W3.: https://www.w3.org/TR/css-transitions-1/#animatable-css

Тем не менее, простой способ создать один и тот же эффект состоит в том, чтобы два значка перекрывали друг друга - по одному для каждого класса .fa - и затем использовали чистый CSS для анимации желаемого поведения при наведении,Это может быть достигнуто с помощью следующего:

HTML: 

<table class="table">
  <tr>
    <td><i class="fa fa-heart-o icon-default"></i><i class="fa fa-heart icon-hover"></i></td>
  </tr>
</table>

CSS: 

.table .fa {
  transition: opacity 1s ease;
}
.icon-hover {
  opacity: 0;
  left: -16px;
  position: relative;
}
.table:hover .icon-default {
  opacity: 0;
}
.table:hover .icon-hover {
  opacity: 1;
}

Сначала я установил переход для 1s ease для вашего примера;мы установили его только на opacity, так как это единственное изменение свойства.Затем я установил второй значок .fa (.icon-hover) на opacity:0 и поместил его позади основного (.icon-default).

Наконец, для переключения режима применяется правило :hover.непрозрачность двух значков при наведении на элемент .table;в сочетании с ранее определенным свойством transition эти два элемента появляются и исчезают.

CodePen здесь: https://codepen.io/anon/pen/VELLgj

...