如何使用速度创建更智能的切换动画答案

【问题标题】：How to create smarter toggle animation using velocity如何使用速度创建更智能的切换动画
【发布时间】：2015-08-27 02:08:53
【问题描述】：

我正在使用velocity.js 来处理动画，而且它大部分都很棒。我有一个关于 codepen 的基本演示，它显示了一个简单的切换按钮，但是让它动画化的 js 似乎非常麻烦。

在我的示例中处理这样的切换动画的最佳方法是什么？

var open = false;

$('.filter').click(function(e){

    e.preventDefault();

    var el = $(this);

    if(!open){

        el.find('.filter__line:first').velocity({translateY: [0, -5]}, 200, function(){
            $(this).addClass('filter__line--thick').velocity({rotateZ: '45deg'}, 200);
        });

        el.find('.filter__line:last').velocity({translateY: [0, 5]}, 200, function(){
            $(this).addClass('filter__line--thick').velocity({rotateZ: '-45deg'}, 200);
        });

        open = true;

    } else {

        el.find('.filter__line:first').velocity({rotateZ: '0deg'}, 200, function(){
            $(this).removeClass('filter__line--thick').velocity({translateY: [-5, 0]}, 200);
        });

        el.find('.filter__line:last').velocity({rotateZ: '0deg'}, 200, function(){
            $(this).removeClass('filter__line--thick').velocity({translateY: [5, 0]}, 200);
        });

        open = false;
    }

});

http://codepen.io/matt3224/pen/zGgKwP?editors=011

谢谢

【问题讨论】：

标签： javascript jquery css animation velocity.js

【解决方案1】：

我使用 Velocity 很长时间，经常遇到这类问题。如果您正在制作任何类型的复杂动画，我强烈建议您使用 GSAP。 GSAP 时间线允许您轻松播放、暂停和反转一系列动画，并且语法简洁明了。您可以在GSAP website 上找到更多信息。

I made a quick demo using this technique on Codepen.

脚本如下所示：

$(document).ready(function(){

var top = $('.part-1');
var mid = $('.part-2');
var btm = $('.part-3');

var tl = new TimelineMax().pause();
  tl.to(mid, 0.3, {x:100, opacity:0})
  .to(top, 0.3, {rotation:18, transformOrigin:"left top"},"second")
  .to(btm, 0.3, {rotation:-18, transformOrigin:"left bottom"},"second");

var active = false;

  $('h1').click(function(){
    if(!active){
      tl.play();
      active = true;
    } else {
      tl.reverse();
      active = false;
    } 
  }); // end of click

}); // end of ready

【讨论】：