退出
充值

css3+html5 svg购物车结算按钮无人机交互动画特效

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2020-01-09
css3+html5 svg制作的一款购物车结算按钮无人机交互动画特效,非常有创意的按钮图标交互动画效果。


js代码

<script>
const $demo = document.querySelector('.demo');
let processing = false;

$demo.addEventListener('click', () => {
  if (processing) return;
  let reverting = false;
  processing = true;
  const $endListener = document.createElement('div');
  $endListener.classList.add('demo-transitionend-listener');
  $demo.appendChild($endListener);
  const layoutTrigger = $demo.offsetTop;
  $demo.classList.add('s--processing');
  
  $endListener.addEventListener('transitionend', () => {
    if (reverting) return;
    reverting = true;
    $demo.classList.add('s--reverting');
  });
  
  setTimeout(() => {
    $demo.removeChild($endListener);
    $demo.classList.remove('s--processing', 's--reverting');
    processing = false;
  }, 10000);
});
</script>