菜鸟笔记——关于过渡动画的设定

关于动画过度的设定据我所知有两种，一种是JavaScript的动画过渡效果，这种效果通常用于轮播函数，另一种是CSS语言的动画，先来说这第一种：

function animation2(offset){
         transfor = true;
         var container = document.getElementById("container");
         var time = 300; //运动总时间
         var interval = 10; //运动间隔时间
         var speed = offset/(time/interval); //每一次位移量=总位移量/运动次数；
         var newTop = parseInt(container.style.top)+offset; //目标值    
         //递归
         function go(){
                  if((speed > 0&&(parseInt(container.style.top) < newTop)) ||
                   (speed < 0 && (parseInt(container.style.top) > newTop)))
{
                          container.style.top =
parseInt(container.style.top) + speed+"px";
                          setTimeout(go,interval);
                  }
                  else{
                          container.style.top = newTop +"px";
                          transfor = false;
                  }
         }
         go();
}

嗯，你没有有看错这就是一整个轮播函数，这个轮播函数之所以具有过渡效果，是因为这句var speed = offset/(time/interval);与递归函数，它是在规定时间多次位移一定的位移量从这份函数来看应该是，在这个方法中利用if分支语句，如果每一次的位移量大于0并且这个parseInt方法的参数值小于目标值或者每一次的位移量小于0并且这个parseInt方法的参数值大于目标值，那么container的top属性值加上一定的位移量同时利用setTimeout方法0.01秒后再执行一遍整个go方法，否则container的top属性值加上目标值。好像有病句，希望不要介意；

接下来是关于CSS的动画过渡效果，关于CSS动画样式有三大类属性transition(过渡transform(变换)以及animation(动画)，今天其他的不重要，暂且不说，只说这个过渡，关于这transition (过渡)它呢，是个复合属性，有四个值，不过他要原样式和相应伪类配合使用，以及其他的样式属性包括但不限于transform(变换)、animation(动画)以及background(背景)，而伪类包括但不限于hover(当鼠标移入时)、active(当鼠标点击时) ,伪类这个叫法源于它们跟类相似,但实际上并没有类会附加到标记中的标签上。

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

基本样式：
.rightBtn a{
         display: block;
         width: 140px;
         height: 30px;
         background: white;
         transform: translateX(110px);//该元素整个水平方向右移动110像素，负数是向左移动。
         transition: all 0.2s ease;//所有属性都将在0.2s内动画以低速开始，然后加快，在结束前变慢的速度效果获得过渡
         //属性/时间/速度效果
}

鼠标移入后第n个a标签在第n秒后以上述效果过渡到0像素的位置

// :nth-of-type(n) a:nth-of-type(2) 选择属于其父元素第二个<a>元素的每个<a>元素
.rightBtn:hover a{transform: translateX(0px);}
.rightBtn a:nth-of-type(1) {transition-delay:0.05s;}
.rightBtn a:nth-of-type(2) {transition-delay:0.1s;}
.rightBtn a:nth-of-type(3) {transition-delay:0.15s;}
.rightBtn a:nth-of-type(4) {transition-delay:0.2s;}
.rightBtn a:nth-of-type(5) {transition-delay:0.25s;}
.rightBtn a:nth-of-type(6) {transition-delay:0.3s;}
.rightBtn a:nth-of-type(7) {transition-delay:0.35s;}
.rightBtn a:nth-of-type(8) {transition-delay:0.4s;}
.rightBtn a:nth-of-type(9) {transition-delay:0.45s;}