Javascript 动画'；显示'；没有jQuery

我想在我正在开发的最新网站上做一点动画。基本上，我需要一个或两个div/段落显示/隐藏，基于单选按钮集或复选框上的onClick事件（然后，如果radio/check是值A，则显示div/p，如果是B，则隐藏它）

问题是，这就是我想要在那个特定网站上使用javascript的全部内容，所以jQuery看起来有点过火（即使是缩小版）

---

有什么简单的方法可以通过香草javascript或其他一些最小的库来实现这一点吗[我通常在寻找一些可以使用CSS转换的东西。不是在每个浏览器中都可以使用，但IE7中的用户与Chrome/Safari/FF4中的用户没有完全相同的体验，这是完全可以接受的。

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

功能交换（rad）{
var p1=document.getElementById（“p1”）；
var p2=document.getElementById（“p2”）；
如果（rad.value==“1”）{
p1.style.display=“无”；
p2.style.display=“块”；
}否则{
p1.style.display=“块”；
p2.style.display=“无”；
}
返回false；
}
一个
两个
你好

你好

如果您想通过更新元素的“高度”来制作动画，从而使其具有某种“向下滑动”（我想是“向上滑动”）的效果，这应该不会太难。您只需使用计时器快速进行小的更改即可

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

废话废话
（功能（）{
var div=document.getElementById（'animateMe'）；
var curh=0，finalh=100；
var interval=setInterval（函数（）{
如果（curh==finalh）{
间隔时间；
返回；
}
curh=curh+1；
div.style.height=curh+'px'；
}, 50);
})();

---

这只是一个示例；您可以将代码连接到事件处理程序或其他任何程序。

以下是fadeIn fadeOut动画脚本。您可以直接使用它。 在任何浏览器中都能发挥魅力

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);
  }  

---

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

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{显示：无；溢出：隐藏；}

当然还有现场测试用例：

---

它应该是相当简单的动画宽度以及（甚至可能在同一时间），以实现“凉爽”效果：

关于它的价值，我有同样的问题，但我想知道元素的高度，即使它没有在样式中设置，即使元素有显示：无。所以我的解决方案是窃取元素，使其不可见，将其放置在看不见的地方，使其显示：block，使用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);

      }


     }

函数slideElementIn（myid）{
mydiv=document.getElementById（myid）；
if（mydiv.style.display！=“none”）返回；
//当显示为“无”时，clientHeight为零。因此，请准备：
inipos=mydiv.style.position；
INIVision=mydiv.style.visibility；
Inization=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=“隐藏”；
mydiv.style.position=“固定”；
mydiv.style.display=“block”；
finHeight=mydiv.clientHeight；//明白了！
//修理损坏：
mydiv.style.display=“无”；
mydiv.style.position=inipos；
mydiv.style.visibility=ini可见性；
mydiv.style.zIndex=日化；
mydiv.style.top=initop；
mydiv.style.left=ini左；
iniHeight=mydiv.style.height；
mydiv.style.height=0；
mydiv.style.display=“block”；
mydiv.style.overflow=“隐藏”；
var i=1；//将计数器设置为1
函数myLoop2（i，mydiv，finHeight，iniHeight，inioverflow）{//创建一个循环函数
setTimeout（函数（）{//调用循环时调用3s setTimeout
mydiv.style.height=finHeight*easeIn（i*（1./fadeDuration））；
i++；//递增计数器
如果（i0）{//如果计数器<10，则调用循环函数
myLoop（i，mydiv，finHeight，iniHeight，inioverflow）；/…再次触发另一个
}否则{
mydiv.style.display=“无”；
<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();
});

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');
    });
}

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

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();
}