没有jQuery的动画'show'

Question

我想在这个最新的网站上做一些动画我正在努力.基本上,我需要一个或两个div /段显示/隐藏基于onClick事件的单选按钮设置或复选框(然后,如果radio/check是值A,显示div/p,如果它是B然后隐藏它)

问题是,这就是我想在那个特定的网站上javascript-ify,所以jQuery看起来有点矫枉过正(甚至是缩小版)

是否有任何简单的 [我不能强调这个]通过vanilla javascript或其他一些最小的库来做这个[我一般都在寻找事件和动画(高度)<2kB的东西]

有任何想法吗？

谢谢!

编辑:感谢大家,我刚刚意识到,尽管我需要通过智能html + js完成一些事情,但显示/隐藏正确div的规则是如此复杂,以至于包含jQuery的价值为30kB(如果它已经从CDN缓存了更多,那么我将坚持使用jQuery.给每个人干杯:)

编辑: JS + CSS3过渡后续工作:) http://jsfiddle.net/ygZM7/23/

唯一的事情是:如果之前未设置高度(动态),则首次设置时,背景轻弹(从0px高度开始).

Answer 1

我想出了自己的快速脚本..这里什么都没有:

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你可以通过在顶部播放两个数字来控制速度:更大的步骤意味着每次显示更大的块,更小的间隔意味着更快的动画.
此代码需要在元素上应用以下样式:

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

当然还有现场测试案例:http://jsfiddle.net/yahavbr/BbWCp/

设置宽度(甚至可能在同一时间)也应该非常简单,以实现"更酷"的效果.:)

Answer 2

如果你想通过更新元素的"高度"来做动画,从而使它按照"向下滑动"(或"向上")的效果排序,它应该不会太难.您只需使用计时器快速进行小的更改.

<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>

那只是一个样本; 你可以将代码连接到事件处理程序或其他任何东西.