Question

我的目标：像Google的this one一样实现侧面菜单的流畅动画（使用移动版左上角的按钮）。（我使用非高端手机测量的动画流畅度。）

我决定测试绝对可能的最简单的动画，因此创建了draft at jsbin。从那以后（几天），结果真的让人感到困惑-最终，最简单的动画的表现远比Google差。（我已经在专用网址上测试了我的，所以jsbin不会弄乱任何内容。）

此外，还有yandex translator，其菜单类似（按钮位于右上角）。当然，互联网上还有其他如此出色的动画，但是它们如何比最简单的设置更流畅地播放？

我会悬赏这个问题，因为这对我来说确实很重要，但是……声誉不足。

再加上第二点-当在动画对象中测试my animations with 24 children时，结果没有差异。我一直认为保持低数很重要。

[忽略以下内容，stackoverflow强制我将其粘贴]

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Sideanimations 0 children">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Sideanimations</title>
</head>
<body>
    <div class='buttonsholder'>
        <button onclick='ff1()'>by size</button>
        <button onclick='ff2()'>by position</button>
        <button onclick='ff3()'>both + rounded</button>
    </div>

  <div id='fikmic1'></div>
  <div id='fikmic2'></div>
  <div id='fikmic3'></div>


  <style>
  body{
        width:100vw;
        height:100vh;
        overflow:hidden;
    }
    .buttonsholder{
     position:absolute;
      bottom:50vh;
      right:0px;
      width:0px;
    }
    button{
        display:block;
        float:right;
      text-align:right;
      padding:0px 1vw;
      margin:.5vw 1vw;
    }

    #fikmic1{
        display:none;
        position:absolute;
      top:0vh;
      left:0vw;
        width:0vw;
        height:100vh;
        background-color:#777;
        transition:.7s;
    }
    #fikmic2{
        display:none;
        position:absolute;
      top:0vh;
      left:-80vw;
        width:80vw;
        height:100vh;
        background-color:#333;
        transition:.7s;
    }
    #fikmic3{
        display:none;
        position:absolute;
      top:50vh;
      left:0vw;
        width:0vw;
        height:0vh;
        background-color:#aaa;
      border-radius:100%;
        transition:.7s;
    }
  </style>

  <script>
      function ff1(){
        var c = document.getElementById('fikmic1');

        if(c.getAttribute('gefikt') === null){
          c.setAttribute('gefikt', '');
          c.style.display = 'block';
          setTimeout(function(){
            c.style.width = '80vw';
          }, 50);
        }
        else{
            c.removeAttribute('gefikt');
            c.style.width = '0vw';
          setTimeout(function(){
            c.style.display = 'none';
          }, 700);
        }
    }
    function ff2(){
        var c = document.getElementById('fikmic2');

        if(c.getAttribute('gefikt') === null){
          c.setAttribute('gefikt', '');
          c.style.display = 'block';
          setTimeout(function(){
            c.style.left = '0vw';
          }, 50);
        }
        else{
          c.removeAttribute('gefikt');
            c.style.left = '-80vw';
          setTimeout(function(){
            c.style.display = 'none';
          }, 700);
        }
    }
    function ff3(){
        var c = document.getElementById('fikmic3');

        if(c.getAttribute('gefikt') === null){
          c.setAttribute('gefikt', '');
          c.style.display = 'block';
          setTimeout(function(){
            c.style.top = (((window.innerHeight/100) * 50) - ((window.innerWidth/100) * 80)) + 'px';
            c.style.left = '-80vw';
            c.style.width = '160vw';
            c.style.height = '160vw';
          }, 50);
        }
        else{
          c.removeAttribute('gefikt');
            c.style.top = ((window.innerHeight/100) * 50) + 'px';
            c.style.left = '0vw';
            c.style.width = '0vw';
            c.style.height = '0vw';
          setTimeout(function(){
            c.style.display = 'none';
          }, 700);
        }
    }
  </script>


</body>
</html>

Answer 1

对CSS transform进行动画处理将比对left，width等进行动画处理更加有效。"Modern browsers can animate four things really cheaply: position, scale, rotation and opacity."

为第一个侧面菜单设置动画时，请将transform-origin属性设置为left，以使动画位于菜单左侧的中心。（默认来源为center，在这种情况下，这不是您想要的来源。）

我做了一个revised version of your JS Bin，并在下面将其作为摘要发布了。

function ff1(){
  var c = document.getElementById('fikmic1');

  if(c.getAttribute('gefikt') === null){
    c.setAttribute('gefikt', '');
    c.style.display = 'block';
    setTimeout(function(){
      c.style.transform = 'scaleX(1)';
    }, 50);
  }
  else{
    c.removeAttribute('gefikt');
    c.style.transform = 'scaleX(0)';
    setTimeout(function(){
      c.style.display = 'none';
    }, 700);
  }
}

function ff2(){
  var c = document.getElementById('fikmic2');

  if(c.getAttribute('gefikt') === null){
    c.setAttribute('gefikt', '');
    c.style.display = 'block';
    setTimeout(function(){
      c.style.transform = 'translateX(0vw)';
    }, 50);
  }
  else{
    c.removeAttribute('gefikt');
    c.style.transform = 'translateX(-80vw)';
    setTimeout(function(){
      c.style.display = 'none';
    }, 700);
  }
}

function ff3(){
  var c = document.getElementById('fikmic3');

  if(c.getAttribute('gefikt') === null){
    c.setAttribute('gefikt', '');
    c.style.display = 'block';
    setTimeout(function(){
      c.style.transform = 'scale(1)';
    }, 50);
  }
  else{
    c.removeAttribute('gefikt');
    c.style.transform = 'scale(0)';
    setTimeout(function(){
      c.style.display = 'none';
    }, 700);
  }
}

body{
  width:100vw;
  height:100vh;
  overflow:hidden;
}
.buttonsholder{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  height:100%;
}
button{
  width:4rem;
  text-align:right;
  padding:0 .2rem;
  margin:.4rem .8rem;
}

#fikmic1{
  display:none;
  position:absolute;
  top:0vh;
  left:0vw;
  width:80vw;
  height:100vh;
  transform:scaleX(0);
  transform-origin:left;
  background-color:#777;
  transition:.7s;
}
#fikmic2{
  display:none;
  position:absolute;
  top:0vh;
  left:0vw;
  width:80vw;
  height:100vh;
  transform:translateX(-80vw);
  background-color:#333;
  transition:.7s;
}
#fikmic3{
  display:none;
  position:absolute;
  top:calc(50vh - 80vw);
  left:-80vw;
  width:160vw;
  height:160vw;
  transform:scale(0);
  background-color:#aaa;
  border-radius:100%;
  transition:.7s;
}

<!DOCTYPE html>
<html>
  <head>
    <meta name="description" content="Sideanimations by transform">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Sideanimations</title>
  </head>
  
  <body>
    <div class='buttonsholder'>
      <button onclick='ff1()'>by size</button>
      <button onclick='ff2()'>by position</button>
      <button onclick='ff3()'>both + rounded</button>
    </div>

    <div id='fikmic1'></div>
    <div id='fikmic2'></div>
    <div id='fikmic3'></div>
  </body>
</html>

流畅的动画

1 个答案: