Question

我点击它时试图用动画改变div的顶部位置。所以我尝试了类似的东西：

HTML：

<div class="container" id="container">
    <div class="pink" id="pink">pink</div>
</div>

CSS：

* { margin:0; padding:0; } 
html, body { width:100%; height:100%; }
.container { 
    width:100%; 
    height:100%; 
    overflow:hidden; 
    position:absolute; 
    display:block; 
    top:0;  
    left:0; 
    background-color: #77c8ff; 
}
.pink {
    width:100%; 
    height: 100%; 
    background-color: #ff23f0; 
    position: absolute; 
   top:90%;
   -webkit-transition: top 1s linear ease-out;
}

JS（<HEAD>）

var pink;
var topPos = 90;

window.addEventListener('load', init, false);

function init() {
    pink = document.getElementById('pink');
    pink.onclick = function(){raiseDiv()};
}

function raiseDiv(){
    topPos -= 20;
    if (topPos <= 0) topPos = 0;
    pink.style.top = topPos+'%';
}

它确实提升了div，但没有动画。我尝试使用for循环，并且每次迭代使用setTimeout和setInterval将div提高1％以创建一种动画，但这并不起作用。

那我怎样才能让它发挥作用呢？

这是当前代码的jsfiddle。

Answer 1

使用ease或linear计时功能。你不能同时使用两者：

-webkit-transition: top 1s ease-out;
transition: top 1s ease-out;

演示：http://jsfiddle.net/g96mcnxj/2/

以下是linear转化example。

点击动画更改元素的顶部位置

1 个答案:

演示：http://jsfiddle.net/g96mcnxj/2/