Javascript是编写此动画的更好方法

首先，我尝试将y的值传递回函数，但这会导致浏览器变慢，就像创建了无限循环一样，外部帧变量会停止此操作，但我更愿意将所有变量保留在函数中，有没有一种方法可以在不获得“反馈”的情况下实现这一点

var frame=0;

function launch(){

var el=document.getElementById("selection");

setInterval(function(){ drawer(el,frame);},300);

}

function drawer(el,y){

if(y<20){
frame++;
el.style.top=20+frame+"px";
setInterval(function(){ drawer(el,frame);},300);

}

var帧=0；
函数启动（）{
var el=document.getElementById（“选择”）；
setInterval（函数（）{drawer（el，frame）；}，300）；
}
功能抽屉（el，y）{
如果（y这是更新的代码。您只需创建一次间隔。将其存储在变量中，并在达到最大值时清除它

var frame = 0;
var running = null;
var max = 20;
var e = document.getElementById("selection");

function drawer() {
    ++frame
    e.style.top = 20 + frame + "px";
    
    if (frame == max) {
        clearInterval(running);
        running = null;
    }
}

running = setInterval(drawer, 300);

演示


编辑
正如您在问题中所说，您希望将所有变量保留在函数中，您可以使用以下方法：

function drawer(e, frame) {
    if ('undefined' == typeof e) {
        var e = document.getElementById("selection");
    }

    if ('undefined' == typeof frame) {
        var frame = 0;
    }
    
    ++frame
    e.style.top = 20 + frame + "px";
    
    if (frame <= 20) {
        setTimeout(function() { drawer(e, frame); }, 300);
    }
}
                   
drawer();

功能抽屉（e，框架）{
if（'undefined'==类型e）{
var e=document.getElementById（“选择”）；
}
if（'undefined'==帧类型）{
var帧=0；
}
++框架
e、 style.top=20+frame+px；
如果（frame使用闭包，您还希望使用setTimeout或在完成时终止间隔：

function launch(){

    var animator = function(el) {
      var frame = 0;
      var _this = {
         draw : function() {
            frame += 1;
            el.style.top=20+frame+"px";
            if(frame < 20) {
                setTimeout(_this.draw, 300);
            }
         }
      }

      return _this;

    }(document.getElementById("selection"));

    setTimeout(animator.draw, 300);
}

函数启动（）{
var animator=函数（el）{
var帧=0；
var_这={
绘图：函数（）{
帧+=1；
el.style.top=20+框架+px；
如果（帧<20）{
setTimeout（_this.draw，300）；
}
}
}
把这个还给你；
}（document.getElementById（“selection”）；
设置超时（animator.draw，300）；
}
以下是一些改进编码风格的建议：


试着做一个有意义的函数
尝试使用有意义且清晰的名称参数化数字
写干净的代码

让我告诉你我对你所做的理解。
正如你所看到的，它对其他人来说更干净、更容易阅读/理解

我在底部包括了一个现场演示供你摆弄

function launch() {
    var el = document.getElementById('selection'),
        maxY = 300,
        stepY = 20,
        interval = 100;
    animateY(el, maxY, stepY, interval);
}

function moveToY(el, y) {
    el.style.top = y + "px";
}

function animateY(el, maxY, stepY, interval) {
    var y = 0;
    var id = setInterval(function () {
        if (y < maxY) {
            y += stepY;
            moveToY(el, y);
        }
        else {
            clearInterval(id);
        }
    }, interval);
}

函数启动（）{
var el=document.getElementById（'selection'），
最大值=300，
stepY=20，
间隔=100；
动画（el、maxY、stepY、interval）；
}
功能移动玩具（el，y）{
el.style.top=y+“px”；
}
函数animateY（el、maxY、stepY、interval）{
var y=0；
变量id=setInterval（函数（）{
if（y

这里有一个现场演示：
你必须用JavaScript再次解决这个问题，还是可以使用CSS转换？jQuery…非常有趣，但不支持。IE 9不支持CSS转换。使用TweenMaxJS制作js动画
函数（）{drawer（）；}
可以替换为
抽屉
@Blender是的，很好。我已经更新了代码。谢谢，这正是我的意思。