如何在使用辅助类添加和删除类时全部应用转换答案

【问题标题】：How to apply transition all on adding and removing a class with helper class如何在使用辅助类添加和删除类时全部应用转换
【发布时间】：2019-03-05 23:32:58
【问题描述】：

我正在尝试添加添加和删除（切换）到类.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>

【问题讨论】：

标签： javascript jquery css css-transitions

【解决方案1】：

我不相信这会按您的意愿工作，因为切换 .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) 后面。

最后，当鼠标悬停在.table元素上时，应用:hover规则来切换两个图标的不透明度；结合之前定义的transition 属性，两者似乎交叉淡入/淡出。

这里的代码笔：https://codepen.io/anon/pen/VELLgj

【讨论】：