javascript - 将文本放在 jquery 动画的一侧

Question

我找到了这篇文章 Animate like button when click on it , 但我想知道如何放置动画的文本面。

我试过:

<div class="heart">TEXT</div>

&&

<div class="heart"><p>TEXT</p></div>

但是文字超过了动画... 我只想要动画右侧的文字。 怎么做这个？

Answer 1

这是基于您正在尝试做的 fiddle 的更新片段。

$(".heart").on('click touchstart', function(){
  $(this).toggleClass('animating');
});


$(".heart").on('animationend', function(){
  $(this).toggleClass('animating');
});

.heart {
  float:left;
  margin-top: -1em;
  cursor: pointer;
  height: 50px;
  width: 50px;
  background-image:url(  'https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png');
  background-position: left;
  background-repeat:no-repeat;
  background-size:2900%;
 }

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

 .animating {
  animation: heart-burst .8s steps(28) 1;
 }

 @keyframes heart-burst {
 from {background-position:left;}
 to { background-position:righ;}
 }

<div class="heart-container">
  <div class="heart"></div>
  <p>TEXT</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>