Question

我为div的位置设置动画，然后以不同的方式回到它的起源：

items = Item.where(condition1, condition2, ...)
            .order(created_at: :desc)
            .select(:user_id)
            .limit(n)

repeats = []
current_user_id, current_count = nil

items.each do |i|
  if current_user != i.user_id
     repeats << { i.user_id: current_count } if current_count.present?
     current_user = i.user_id
     current_count = 0
  else
     current_count += 1
  end
end

问题是在两个动画都运行一次后，它们不再运行，为什么？我怎么能按需重复这些呢？

JSFIDDLE

Answer 1

＆＃13;

var anim_a = function() {
  var anm = new TimelineMax().to($(".mybox"), 1, {
    x: 400
  }).stop();
  anm.play();
}
var anim_b = function() {
  var anm = new TimelineMax().to($(".mybox"), 1, {
    x: 0,
    ease: Bounce.easeOut
  }).stop();
  anm.play();
}

$(".run-a").click(function(e) {
  anim_a();
});

$(".run-b").click(function(e) {
  anim_b();
});

＆＃13;

.run-a,
.run-b {
  background: green;
  display: inline-block;
  padding: 10px;
  cursor: pointer;
}

.mybox {
  width: 200px;
  height: 200px;
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>

<div class="run-a">Go</div>
<div class="run-b">Go back</div>

<div class="mybox"></div>

＆＃13;

我不习惯这个TimeLineMax。我仍然对代码进行了一些小改动，现在它的工作正如所说的那样。请检查并确认这是否适合您的具体情况。我只是将anim_a和anim_b作为包含播放操作的两个函数。

Greensock - 单个对象上的多个后续补间

1 个答案: