jquery - 从 "data"标签中获取文本并加载动画

Question

我有一个无序列表，每个元素上都有“data-text”标签，还有空的“p”标签。 我在每个元素上使用 click 事件，并从 data-text 标签中获取文本以使用动画加载到这个 p 标签中。

但问题是动画仅在第一次运行时起作用，当单击其他元素时，文本加载时没有动画。

演示:jsfiddle

$("ul.list > .list-item").each(function() {
  $(this).click(function() {
    $(".text-here").text($(this).data('text')).animate({
      opacity: '1',
      top: '0'
    });
  });
});

.list-item {
  list-style-tyle: none;
  display: inline-block;
  padding: 15px 25px;
  cursor: pointer;
  border: 1px solid red;
  transition: 0.3s all ease-in-out;
}
.list-item:hover {
  background: red;
  color: white;
}
.text-here {
  position: relative;
  top: 40px;
  transition: 0.3s all ease-in-out;
  opacity: 0;
  padding-left: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li class="list-item" data-text="1 List Item">1</li>
  <li class="list-item" data-text="2 List Item">2</li>
  <li class="list-item" data-text="3 List Item">3</li>
  <li class="list-item" data-text="4 List Item">4</li>
</ul>

<p class="text-here"></p>

提前致谢! :)

Answer 1

我强烈建议使用 a CSS3 animation .

Example Here

在这种情况下，我们可以使用以下关键帧:

@keyframes fadeUp {
  0% { top: 40px; opacity: 0; }
}

然后将animate类添加到元素中，并在动画结束时将其移除。

.text-here.animate {
  animation: fadeUp 200ms ease-in forwards;
}

完整代码如下:

$('ul.list > .list-item').on('click', function() {
  $('.text-here').addClass('animate').one('animationend', function() {
    $(this).removeClass('animate');
  }).text($(this).data('text'));
});

.list-item {
    list-style-type: none;
    display: inline-block;
    padding: 15px 25px;
    cursor: pointer;
    border: 1px solid red;
    transition: 0.3s all ease-in-out;
}
.list-item:hover {
    background: red;
    color: white;
}
.text-here {
    position: relative;
    top: 0;
    transition: 0.3s all ease-in-out;
    opacity: 1;
    padding-left: 40px;
}
.text-here.animate {
  animation: fadeUp 200ms ease-in forwards;
}

@keyframes fadeUp {
  0% { top: 40px; opacity: 0; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
    <li class="list-item" data-text="1 List Item">1</li>
    <li class="list-item" data-text="2 List Item">2</li>
    <li class="list-item" data-text="3 List Item">3</li>
    <li class="list-item" data-text="4 List Item">4</li>
</ul>
<p class="text-here"></p>