我已经想出了我自己的快速脚本。这里什么都没有：

var AnimationStep = 10; //pixels
var AnimationInterval = 100; //milliseconds

window.onload = function() {
    var oDiv = document.getElementById("Div1");
    oDiv.style.display = "block";
    var height = oDiv.clientHeight;
    oDiv.style.height = "0px";
    Animate(oDiv, height);
};

function Animate(element, targetHeight) {
    var curHeight = element.clientHeight;
    if (curHeight >= targetHeight)
        return true;
    element.style.height = (curHeight + AnimationStep) + "px";
    window.setTimeout(function() {
        Animate(element, targetHeight);
    }, AnimationInterval);
    return false;
}

这将“动画”id为Div1的元素，您可以通过播放顶部的两个数字来控制速度：更大的 Step 表示每次显示更大的块，更小的 Interval 表示更快的动画。
此代码需要在元素上应用以下样式：

#Div1 { display: none; overflow: hidden; }

当然还有现场测试案例：http://jsfiddle.net/yahavbr/BbWCp/
它应该是相当简单的动画宽度以及（甚至可能在同一时间），以实现“冷却器”的效果。：）

如果您想通过更新元素的“高度”来制作动画，从而使其具有“向下滑动”（或者“向上滑动”）的效果，这应该不会太难。你只需要用计时器快速地做一些小的改变。

<div id='animateMe' style='height: 0px; overflow: hidden'>
  blah blah blah
</div>

<script>
  (function() {
    var div = document.getElementById('animateMe');
    var curh = 0, finalh = 100;
    var interval = setInterval(function() {
      if (curh === finalh) {
        clearInterval(interval);
        return;
      }

      curh = curh + 1;
      div.style.height = curh + 'px';
    }, 50);
  })();
</script>

这只是一个样本你可以将代码连接到事件处理程序或其他东西。

您可以使用CSS过渡。并不是所有浏览器都能使用，但IE7用户的体验与Chrome/Safari/FF 4用户的体验不完全相同，这是完全可以接受的。

<script>
   function swap(rad) {
       var p1 = document.getElementById("p1");
       var p2 = document.getElementById("p2");
       if (rad.value === "1") {
         p1.style.display = "none";
         p2.style.display = "block";
       } else {
         p1.style.display = "block";
         p2.style.display = "none";
       }
       return false;
   }
</script>

<label><input type="radio" name="r" value="1" onclick="swap(this)" />One</label>
<label><input type="radio" name="r" value="2" onclick="swap(this)" />Two</label>
<p id="p1">Hi there</p>
<p id="p2">Hey there</p>

对于它的价值，我有同样的问题，但希望有元素的高度，即使它没有在样式中设置，即使元素有显示：所以我的解决方案是窃取元素，使其不可见，将其放置在不可见的地方，使其显示：块，使用clientHeight测量其高度，使用原始设置将其放回原始位置，然后进行滑动。这就是：

function slideElementIn(myid) {
      mydiv=    document.getElementById(myid);
      if(mydiv.style.display!="none")return;

        // clientHeight is zero when display is none. So, prepare:
      inipos = mydiv.style.position;
      inivisibility = mydiv.style.visibility;
      iniz = mydiv.style.zIndex;
      initop = mydiv.style.top;
      inileft = mydiv.style.left;
      inioverflow = mydiv.style.overflow;
      mydiv.style.zIndex = "-999";
      mydiv.style.top = "0";
      mydiv.style.left = "0";
      mydiv.style.visibility = "hidden";
      mydiv.style.position = "fixed";
      mydiv.style.display = "block";
      finHeight = mydiv.clientHeight; // got it!
      // repair damage:
      mydiv.style.display = "none";
      mydiv.style.position = inipos;
      mydiv.style.visibility =     inivisibility;
      mydiv.style.zIndex = iniz;
      mydiv.style.top = initop;
      mydiv.style.left = inileft;

      iniHeight = mydiv.style.height;
      mydiv.style.height = 0;
      mydiv.style.display = "block";
      mydiv.style.overflow="hidden";

      var i = 1;                     //  set your counter to 1
      function myLoop2 (i,mydiv,finHeight,iniHeight,inioverflow) {           //  create a loop function
         setTimeout(function () {    //  call a 3s setTimeout when the loop is called
            mydiv.style.height = finHeight * easeIn(i * (1./fadeDuration));
            i++;                     //  increment the counter
            if (i < fadeDuration) {            //  if the counter < 10, call the loop function
               myLoop2(i,mydiv,finHeight,iniHeight,inioverflow);             //  ..  again which will trigger another
            }  else {
                mydiv.style.height = iniHeight;
                mydiv.style.overflow=inioverflow;
            }                       //  ..  setTimeout()
         }, 1)
      }

      myLoop2(i,mydiv,finHeight,iniHeight,inioverflow);

     }

    function slideElementOut(myid) {
      mydiv=    document.getElementById(myid);
      itsdisplay = mydiv.style.display ;
      if ( itsdisplay != "none" ) {

        finHeight = mydiv.clientHeight;
        iniHeight = mydiv.style.height;
        inioverflow = mydiv.style.overflow;
        mydiv.style.overflow = "hidden";
        var i = fadeDuration;                     //  set your counter to 1
        function myLoop (i,mydiv,finHeight,iniHeight,inioverflow) {           //  create a loop function
           setTimeout(function () {    //  call a 3s setTimeout when the loop is called
              mydiv.style.height = finHeight * easeOut(i * (1./fadeDuration));
              i--;                     //  increment the counter
              if (i > 0) {            //  if the counter < 10, call the loop function
                 myLoop(i,mydiv,finHeight,iniHeight,inioverflow);             //  ..  again which will trigger another
              }  else {
                  mydiv.style.display = "none";
                  mydiv.style.height = iniHeight;
                  mydiv.style.overflow=inioverflow;
              }                       //  ..  setTimeout()
           }, 1)
        }

        myLoop(i,mydiv,finHeight,iniHeight,inioverflow);

      }

     }

我想这仍然是值得张贴在这里，因为当我搜索我的答案，我得到了这个问题，但只需要几个步骤。我希望这对某人有帮助。

我最近转换了一个网站，以消除其对jQuery的依赖，它使用fadeIn()和hide()作为动画“标签页”-类似UI -如果用户单击另一个标签，则当前标签页将立即消失，而新标签将快速淡入。
我想避免自己在Javascript中做任何动画，特别是CSS3的transition和animation功能现在得到了很好的支持。由于这个问题最初是从2011年开始的，我假设它可以通过更新来完成，下面是我使用的：没有jQuery和手动动画（setInterval，setTimeout，requestAnimationFrame等）：
由此：

<div id="tabContainer">
    <ul>
        <li class="tab" data-tab="tabPage1">Page 1</li>
        <li class="tab" data-tab="tabPage2">Page 2</li>
        <li class="tab" data-tab="tabPage3">Page 3</li>
    </ul>
    <div class="tabPage" id="tabPage1"></div>
    <div class="tabPage" id="tabPage2"></div>
    <div class="tabPage" id="tabPage3"></div>
</div>

$('#tabContainer .tab').click(function(e) {
    // when a tab is clicked:

    // 1. Hide all other tabs
    $('#tabContainer .tabPage').hide();

    // 2. Show the selected tab, determined from the clicked element's `data-tab` attribute:
    $( '#' + $(this).data('tab') ).fadeIn();
});

(and一个85 KB的jQuery.min.js下载...）
变成这样

var nodes = document.querySelectorAll('#tabContainer .tab');
for(var i=0; i < nodes.length; i++) {
    nodes[i].addEventListener('click', function(event) {

        var tabPages = document.querySelectorAll('#tabContainer .tabPage');
        for(var j=0; j < tabPages.length; j++) {
            tabPages[i].style.display = 'none';
            tabPages[i].classList.remove('animFadeIn');
        }

        var tabToShow = document.querySelector('#' + event.currentTarget.dataset['tab']);
        tabToShow.style.display = '';
        tabToShow.classList.add('animFadeIn');
    });
}

这个CSS：

.animFadeIn {
    animation: animFadeInAnim 300ms;
}
@keyframes animFadeInAnim {
    0% {
        display: block;
        opacity: 0;
    }
    100% {
        opacity: 1.0;
    }
}

您不能使用CSS transition s，因为每当display:属性更改时，opacity转换就会被阻止，但CSS动画确实支持它。
这可以通过用for(var e of...替换for(var...循环来缩短，但是这种循环还没有广泛的浏览器支持（截至2016年6月）。

使用以下转换函数：

function transition(style, prop, unit, from, to, duration, callback){
    var change = from-to,
        now = performance.now(),
        end = now + duration;
    function anim8(){
        now = end - performance.now();
        if (now < 0){
            style[prop] = to + unit;
            return callback();
        }

        style[prop] = to + change*now/duration + unit;

        requestAnimationFrame(anim8);
    }
    anim8();
}

示例：

transition(
    document.body.style,
    'width',
    'vw',   // unit (appended onto the end)
    95,     // start value
    50,     // end value
    5000,   // duration (miliseconds)
    function(){console.log('done!')} // function to run after finished
);

function transition(style, prop, unit, from, to, duration, callback) {
  var change = from - to,
    now = performance.now(),
    end = now + duration;

  function anim8() {
    now = end - performance.now();
    if (now < 0) {
      style[prop] = to + unit;
      return callback();
    }

    style[prop] = to + change * now / duration + unit;

    requestAnimationFrame(anim8);
  }
  anim8();
}

<body style="border:1px solid">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at consequat nisl. Vestibulum tempor dapibus venenatis. Donec sed auctor elit. Suspendisse eget lectus nulla. Pellentesque dapibus tempus tortor, eu cursus ligula iaculis ut. Donec a ipsum elit. Suspendisse gravida fringilla dolor, pulvinar scelerisque ante consectetur vitae.

我有时会发现自己使用这个方便的函数，而不是CSS转换，因为，让我们诚实地说：CSS的过渡并不是完全经过深思熟虑的。我并不是说CSS过渡不好（我有时会使用它们），我只是说很难在任何地方使用它们。通常很难同步取消offsetWidth以强制回流，但最终会出现故障过渡，因此您可以尝试setTimeout偏移，直到它变得难以忍受的复杂，但仍然会出现故障。对于你使用过渡的目的，你可能没有这个问题，但是对于我使用它们的目的，我确实有这个问题。他们应该在规范中包含一个Element.reflow()函数，它将比void Element.offsetWidth更进一步，并实际尝试同步和“整理”转换。这个单一的功能将使我的工作作为一个开发者10000000000000000000000000%更容易。

下面是一个淡入淡出动画脚本，你可以直接使用。在任何浏览器中都像一个魅力。

var TimeToFade = 1000.0;

function fade(eid)
{
  var element = document.getElementById(eid);
  if(element == null)
    return;

  if(element.FadeState == null)
  {
    if(element.style.opacity == null
        || element.style.opacity == ''
        || element.style.opacity == '1')
    {
      element.FadeState = 2;
    }
    else
    {
      element.FadeState = -2;
    }
  }

  if(element.FadeState == 1 || element.FadeState == -1)
  {
    element.FadeState = element.FadeState == 1 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
  }
  else
  {
    element.FadeState = element.FadeState == 2 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade;
    setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
  }