Question

我试图创建一个像twitter一样的按钮，但我似乎无法使JS / CSS正常工作（或者我做错了）。每当一个帖子被喜欢我想要this动画播放时，仅供参考：我已经解决了导致所有这些动画同时出现动画的问题。当显示用户已经喜欢的帖子时，我希望它是纯红色（如动画结束时）。当一个帖子还没有被用户喜欢时，我希望它是一个纯灰色（就像在动画开头一样）。您可以在下面找到我的Javascript，CSS和＆amp; HTML。我使用Laravel作为项目的框架，并使用他们的模板引擎刀片来解析@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');
}

创建CSS / Javascript / jQuery＆＃39;像heart＆＃39;

1 个答案: