Question

我正在制作赞或按钮，我想添加一些过渡效果，有点像对图标更改的短fade in fade out效果，点击图标将消失或淡出，然后新图标将淡入，整个动画将为0.6s-0.8s顶部。图标为font-awesome icons。

这是我到目前为止https://jsfiddle.net/2Lzo9vfc/11/

HTML

<h3>This is post 1</h3>
<div class="like">0 <button class="like-button"><i class="fa fa-thumbs-o-up"></i></button></div>

<h3>This is post 2</h3>
<div class="like">0 <button class="like-button"><i class="fa fa-thumbs-o-up"></i></button></div>

CSS

h3 {
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    margin-right: 15px;
}

button {
    background: none;
    border: 1px solid black;
    color: black;
    text-transform: uppercase;
    font-size: 12px;
    padding: 5px 10px;
}

.like button {
    border: none;
}

JS

$('.like-button').each(function() {
  $(this).click(function() {
    $(this).children('i').removeClass('fa-thumbs-o-up').addClass('fa-thumbs-up');
  });
})

Answer 1

您可以使用promise().done()在淡出完成后更改类，然后在更改类后立即淡入。

$('.like-button').each(function () {
    $(this).click(function () {
        $this = $(this).children('i');
        $this.fadeTo(600, 0).promise().done(function () {
            $this.removeClass('fa-thumbs-o-up').addClass('fa-thumbs-up').fadeTo(600,1);
        });
    });
})

Answer 2

在css中

.like-button i {
  transition:1s all ease;   
}

像按钮更改与过渡效果

2 个答案: