javascript - 创建 CSS/Javascript/jQuery 'like heart'

Question

我正在尝试创建一个类似于 twitter 之心的按钮，但我似乎无法让 JS/CSS 正常工作(或者我做错了)。每当一个帖子被喜欢时，我想要 this播放动画，仅供引用:我已经解决了导致所有动画同时播放的问题。当显示用户已经喜欢的帖子时，我希望它是纯红色(就像在动画结束时一样)。当一个帖子还没有被用户点赞时，我希望它是纯灰色(就像在动画开始时一样)。您可以在下方找到我的 Javascript、CSS 和 HTML。我使用 Laravel 作为我元素的框架，并使用他们的模板引擎 blade 来解析 @if。

JavaScript

$('.like').on('click', function(e) {
    e.preventDefault();
    postId = e.target.parentNode.parentNode.dataset['postid'];
    var isLike = e.target.previousElementSibling == null;
    $.ajax({
        method: 'POST',
        url: urlLike,
        data: {isLike: isLike, postId: postId, _token: token}
    }).done(function() {
        if(isLike) {
            if ($(e.target).css('background-position', 'right')) {
                $(e.target).removeClass('heartAnimation');
                $(e.target).addClass('heart');
            } else if ($(e.target).css('background-position', 'left')) {
                $(e.target).addClass('heartAnimation');
            }
            //Change page
        }
    });
});

CSS

.heart{
    background: url('http://localhost:8079/uncaughterror/public/src/img/web_heart_animation.png');
    background-position: left;
    background-repeat: no-repeat;
    height: 50px; width: 50px;
    cursor: pointer;
    position: absolute;
    left: -16px;
    bottom: -16px;
    background-size:1450px;
}

.heart:hover {
    background-position: right;
}

.interaction {
    position: relative;
}

@-webkit-keyframes heartBlast {
    0% {background-position: left;}
    100% {background-position: right;}
}

@keyframes heartBlast {
    0% {background-position: left;}
    100% {background-position: right;}
}

.heartAnimation {
    -webkit-animation-name: heartBlast;
    animation-name: heartBlast;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: steps(28);
    animation-timing-function: steps(28);
    background-position: right;
}

Laravel 标记

@if(Auth::user()->likes()->where('post_id', $post->id)->where('like', '1')->first())
    <a href="#" class="like heart" style="background-position: right;"></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
@else
    <a href="#" class="like heart"></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
@endif

Answer 1

您必须更改您的if 语句。

if ($(e.target).css('background-position') === 'right') {
  $(e.target).removeClass('heartAnimation');
  $(e.target).addClass('heart');
} else if ($(e.target).css('background-position') === 'left') {
  $(e.target).addClass('heartAnimation');
}