无法在使用Helper类添加和删除类时应用全部过渡

时间:2018-09-30 19:12:33

标签: javascript jquery css3 css-transitions

我正在尝试在向类.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 :(得分:0)

我不认为这可以按照您的意图工作,因为切换.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