Fatal编程技术网

Javascript 平滑动画

javascript html css

Javascript 平滑动画,javascript,html,css,Javascript,Html,Css,我的目标是：在google上实现侧菜单的平滑动画（在移动版本中使用左上角的按钮）。（我用非高端手机测量动画平滑度。） 我决定测试尽可能最简单的动画，因此创建了一个。从那以后（几天），我对结果感到非常困惑——最终最简单的动画的表现要比谷歌的差得多。（我在一个专用的url上测试了我的，所以jsbin没有弄乱任何东西。） 此外，还有一个类似的菜单（按钮位于右上角）。当然，互联网上还有其他这样好的动画，但它们如何比最简单的设置播放得更流畅呢 我会悬赏这个问题，因为它对我来说真的很重要，但是。。。没有足够

我的目标是：在google上实现侧菜单的平滑动画（在移动版本中使用左上角的按钮）。（我用非高端手机测量动画平滑度。）

我决定测试尽可能最简单的动画，因此创建了一个。从那以后（几天），我对结果感到非常困惑——最终最简单的动画的表现要比谷歌的差得多。（我在一个专用的url上测试了我的，所以jsbin没有弄乱任何东西。）

此外，还有一个类似的菜单（按钮位于右上角）。当然，互联网上还有其他这样好的动画，但它们如何比最简单的设置播放得更流畅呢

我会悬赏这个问题，因为它对我来说真的很重要，但是。。。没有足够的声誉

另外，当在动画中测试时，结果没有差别。我一直认为孩子们的数量要保持在低水平是很重要的

[忽略以下内容，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>


侧面动画
按大小
按位置
两个+四舍五入
身体{
宽度：100vw；
高度：100vh；
溢出：隐藏；
}
buttonsholder先生{
位置：绝对位置；
底部：50vh；
右：0px；
宽度：0px；
}
钮扣{
显示：块；
浮动：对；
文本对齐：右对齐；
填充：0px 1vw；
利润率：5vw 1vw；
}
#图1{
显示：无；
位置：绝对位置；
顶部：0vh；
左：0vw；
宽度：0vw；
高度：100vh；
背景色：#777；
过渡：.7s；
}
#图2{
显示：无；
位置：绝对位置；
顶部：0vh；
左：-80vw；
宽度：80vw；
高度：100vh；
背景色：#333；
过渡：.7s；
}
#图3{
显示：无；
位置：绝对位置；
顶部：50vh；
左：0vw；
宽度：0vw；
高度：0vh；
背景色：#aaa；
边界半径：100%；
过渡：.7s；
}
函数ff1（）{
var c=document.getElementById（'fikmic1'）；
if（c.getAttribute（'gefikt'）==null）{
c、 setAttribute（'gefikt'，''）；
c、 style.display='block'；
setTimeout（函数（）{
c、 style.width='80vw'；
}, 50);
}
否则{
c、 删除属性（“gefikt”）；
c、 style.width='0vw'；
setTimeout（函数（）{
c、 style.display='none'；
}, 700);
}
}
函数ff2（）{
var c=document.getElementById（'fikmic2'）；
if（c.getAttribute（'gefikt'）==null）{
c、 setAttribute（'gefikt'，''）；
c、 style.display='block'；
setTimeout（函数（）{
c、 style.left='0vw'；
}, 50);
}
否则{
c、 删除属性（“gefikt”）；
c、 style.left='-80vw'；
setTimeout（函数（）{
c、 style.display='none'；
}, 700);
}
}
函数ff3（）{
var c=document.getElementById（'fikmic3'）；
if（c.getAttribute（'gefikt'）==null）{
c、 setAttribute（'gefikt'，''）；
c、 style.display='block'；
setTimeout（函数（）{
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);
}
否则{
c、 删除属性（“gefikt”）；
c、 style.top=（（window.innerHeight/100）*50）+“px”；
c、 style.left='0vw'；
c、 style.width='0vw'；
c、 style.height='0vw'；
setTimeout（函数（）{
c、 style.display='none'；
}, 700);
}
}
设置CSS动画将比设置
左侧
、
宽度
等动画更有效

设置第一个侧菜单的动画时，将属性设置为
left
，以便动画位于菜单左侧的中心。（默认原点为
中心
，在本例中，这不是您想要的。）

我写了一篇文章，并将其作为一个片段发布在下面

函数ff1（）{
var c=document.getElementById（'fikmic1'）；
if（c.getAttribute（'gefikt'）==null）{
c、 setAttribute（'gefikt'，''）；
c、 style.display='block'；
setTimeout（函数（）{
c、 style.transform='scaleX（1）'；
}, 50);
}
否则{
c、 删除属性（“gefikt”）；
c、 style.transform='scaleX（0）'；
setTimeout（函数（）{
c、 style.display='none'；
}, 700);
}
}
函数ff2（）{
var c=document.getElementById（'fikmic2'）；
if（c.getAttribute（'gefikt'）==null）{
c、 setAttribute（'gefikt'，''）；
c、 style.display='block'；
setTimeout（函数（）{
c、 style.transform='translateX（0vw）'；
}, 50);
}
否则{
c、 删除属性（“gefikt”）；
c、 style.transform='translateX（-80vw）'；
setTimeout（函数（）{
c、 style.display='none'；
}, 700);
}
}
函数ff3（）{
var c=document.getElementById（'fikmic3'）；
if（c.getAttribute（'gefikt'）==null）{
c、 setAttribute（'gefikt'，''）；
c、 style.display='block'；
setTimeout（函数（）{
c、 style.transform='比例（1）'；
}, 50);
}
否则{
c、 删除属性（“gefikt”）；
c、 style.transform='scale（0）'；
setTimeout（函数（）{
c、 style.display='none'；
}, 700);
}
}
正文{
宽度：100vw；
高度：100vh；
溢出：隐藏；
}
buttonsholder先生{
显示器：flex；
弯曲方向：立柱；
对齐项目：柔性端；
证明内容：中心；
身高：100%；
}
钮扣{
宽度：4rem；
文本对齐：右对齐；
填充：0.2rem；
保证金：4雷姆。8雷姆；
}
#图1{
显示：无；
位置：绝对位置；
顶部：0vh；
左：0vw；
宽度：80vw；
高度：100vh；
变换：scaleX（0）；
变换原点：左；
背景色：#777；
过渡：.7s；
}