Question

我有一个动画的切换按钮。设置动画后，我希望将用户重定向到其他页面。该代码来自：https://codemyui.com/flipping-egg-toggle-switch/

我以前没有使用过切换，并且不确定是否有标准的方法来实现这一点。

谢谢！

代码：

var select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
  animationWindow = select('#animationWindow'),
  animData = {
    wrapper: animationWindow,
    animType: 'svg',
    loop: false,
    prerender: false,
    autoplay: false,
    path: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/egg_flip.json'
  },
  anim;

anim = bodymovin.loadAnimation(animData);
anim.addEventListener('DOMLoaded', onDOMLoaded);
anim.setSpeed(15);

function onDOMLoaded(e) {

  animationWindow.onclick = function(e) {
    if (anim.currentFrame > 0) {
      anim.playSegments([anim.currentFrame, 0], true);
      TweenMax.to('.eggGroup', 1, {
        x: 0,
        ease: Elastic.easeOut.config(0.9, 0.38)
      })
    } else {
      TweenMax.to('.eggGroup', 1.4, {
        x: 73,
        ease: Elastic.easeOut.config(0.9, 0.38)
      })
      anim.playSegments([anim.currentFrame, 300], true)
    }
  }
}

  body {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#animationWindow {
  width: 50%;
  ;
  height: 50%;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;

<div id="animationWindow">
</div>

Answer 1

来自TweenMax documentation：使用onComplete属性将函数作为回调传递。例如：

TweenMax.to('.eggGroup', 1.4, {
    x: 73,
    ease: Elastic.easeOut.config(0.9, 0.38),
    onComplete: function(){ ** do something ** };
})

切换后的链接页面

1 个答案: