我希望在数字快速变化时获得动画效果,例如：
http://jsbin.com/kevalutupe/1/
我想单独使用这个CSS(我知道如何在JS中编写代码),我不想使用JS,因为我觉得锤击DOM并不是最好的解决方案. CSS完全可以实现这一点吗？
我并没有对正确递增的数字感到困惑,我只是在效果之后.
解决方法
使用CSS3动画绝对可以实现数字旋转效果,你还可以使用一小部分JS来设置终点并实际获得整个功能.
方法说明：
>创建一个div,通过将其高度和宽度设置为1em,它始终只显示一个数字. div的溢出设置为隐藏,以便只显示一行.
>在此div中,创建一个包含1到0之间所有数字的范围,并相对于父级定位.
>跨度的初始位置为0px或0em,但在动画期间,顶部位置会发生变化,因此跨度会给人以向上移动的印象.因为div一次只能显示一个数字,所以它会产生旋转效果(或其他数字的效果消失).
>通过为每个量程元素设置固定的顶部位置来实现最终位置. 0em表示第1行可见(编号1),-2em表示第3行可见(编号3),依此类推.
>增加或减少动画持续时间将使旋转效果快速或缓慢地发生.动画迭代计数设置为5,以产生微调器旋转多次的错觉.
注意：使用这种方法,旋转看起来像每次都是整个圆圈而不是像问题的JSBin样本那样,第一个数字的3到4只是一个步骤,而不是一个完整的圆圈.
div {
width: 1em;
height: 1em;
overflow: hidden;
line-height: 1em;
display: inline-block;
}
span {
position: relative;
}
.animate {
-webkit-animation: spinit 0.2s 5;
-moz-animation: spinit 0.2s 5;
animation: spinit 0.2s 5;
}
@-webkit-keyframes spinit {
0% {
top: 0em;
}
50% {
top: -5em;
}
100% {
top: -9em;
}
}
@-moz-keyframes spinit {
0% {
top: 0em;
}
50% {
top: -5em;
}
100% {
top: -9em;
}
}
@keyframes spinit {
0% {
top: 0em;
}
50% {
top: -5em;
}
100% {
top: -9em;
}
}
/* Setting the required value to top will make the spinner end at that number */
#digit1 {
top: -4em;
/* -4em means 5 will be the number */
}
#digit2 {
top: -2em;
}
#digit3 {
top: 0em;
}
<div> <span class="animate" id='digit1'>1 2 3 4 5 6 7 8 9 0</span> </div> <div> <span class="animate" id='digit2'>1 2 3 4 5 6 7 8 9 0</span> </div> <div> <span class="animate" id='digit3'>1 2 3 4 5 6 7 8 9 0</span> </div>
下面是一个使用JavaScript的示例,其中动画效果通过CSS实现,但动画的触发和端点的设置是使用JavaScript实现的.
>为按钮的click事件创建一个侦听器,在其中我们将animate类添加到属于此动画效果的所有span元素中.这是因为我们希望动画仅在单击按钮时发生.
>当动画结束(或旋转完成)时,我们将每个跨度的top属性设置为某个随机数.这意味着每个跨度将显示不同的数字.
>在动画结束时,我们还调用另一个函数来删除动画类,这样当我们再次单击该按钮时,动画可以重新开始.
window.onload = function() {
var spinner = document.getElementById('spinner');
spinner.onclick = spinit;
var el = document.querySelectorAll("span[id*=digit]");
for (i = 0; i < el.length; i++) {
el[i].addEventListener("animationend",randomize,false);
el[i].addEventListener("webkitAnimationEnd",false);
el[i].addEventListener("oanimationend",false);
el[i].addEventListener("MSAnimationEnd",false);
}
}
function randomize() {
var rand = Math.floor(Math.random() * 9);
this.style.top = -1 * rand + "em";
this.classList.toggle('animate');
}
function spinit() {
var el = document.querySelectorAll("span[id*=digit]");
for (i = 0; i < el.length; i++) {
el[i].classList.toggle('animate');
}
}
div {
width: 1em;
height: 1em;
overflow: hidden;
line-height: 1em;
display: inline-block;
}
span {
position: relative;
}
.animate {
-webkit-animation: spinit 0.2s 5;
-moz-animation: spinit 0.2s 5;
animation: spinit 0.2s 5;
}
@-webkit-keyframes spinit {
0% {
top: 0em;
}
50% {
top: -5em;
}
100% {
top: -9em;
}
}
@-moz-keyframes spinit {
0% {
top: 0em;
}
50% {
top: -5em;
}
100% {
top: -9em;
}
}
@keyframes spinit {
0% {
top: 0em;
}
50% {
top: -5em;
}
100% {
top: -9em;
}
}
/* Set the value according to the on-load position of the spinner */
#digit1 {
top: -4em;
/* -4em means 5 will be the number */
}
#digit2 {
top: -2em;
}
#digit3 {
top: 0em;
}
<div> <span id='digit1'>1 2 3 4 5 6 7 8 9 0</span> </div> <div> <span id='digit2'>1 2 3 4 5 6 7 8 9 0</span> </div> <div> <span id='digit3'>1 2 3 4 5 6 7 8 9 0</span> </div> <button id='spinner'>Spin It</button>
这是使用与前一个代码大致相同的代码创建的,但不同于前一个动画使得从一个数字到另一个数字的运动逐渐变化(从而产生旋转效果),这里动画使得运动更像是一个突然的从一个数字跳到另一个数字,从而产生增量效果.
跳跃是通过保持顶部位置相同直到它移动到下一个的时间来实现的(也就是说,顶部设置为0em直到动画的9.9％但是在10％时突然变为-1em).
window.onload = function() {
var spinner = document.getElementById('spinner');
spinner.onclick = spinit;
var el = document.querySelectorAll("span[id*=digit]");
for (i = 0; i < el.length; i++) {
el[i].addEventListener("animationend",false);
}
}
function randomize() {
var rand = Math.floor(Math.random() * 9);
this.style.top = -1 * rand + "em";
this.classList.toggle('animate');
}
function spinit() {
var el = document.querySelectorAll("span[id*=digit]");
for (i = 0; i < el.length; i++) {
el[i].classList.toggle('animate');
}
}
div {
width: 1em;
height: 1em;
overflow: hidden;
line-height: 1em;
display: inline-block;
}
span {
position: relative;
}
.animate {
-webkit-animation: spinit 0.2s 5;
-moz-animation: spinit 0.2s 5;
animation: spinit 0.2s 5;
}
@-webkit-keyframes spinit {
0% { top: 0em; }
9.9% { top: 0em; }
10%{ top: -1em; }
19.9%{ top: -1em; }
20%{ top: -2em; }
29.9%{ top: -2em; }
30%{ top: -3em; }
39.9%{ top: -3em; }
40%{ top: -4em; }
49.9%{ top: -4em; }
50% { top: -5em; }
59.9%{ top: -5em; }
60%{ top: -6em; }
69.9%{ top: -6em; }
70%{ top: -7em; }
79.9%{ top: -7em; }
80%{ top: -8em; }
89.9%{ top: -8em; }
90%{ top: -9em; }
99.9%{ top: -9em; }
100% { top: -9em; }
}
@-moz-keyframes spinit {
0% { top: 0em; }
9.9% { top: 0em; }
10%{ top: -1em; }
19.9%{ top: -1em; }
20%{ top: -2em; }
29.9%{ top: -2em; }
30%{ top: -3em; }
39.9%{ top: -3em; }
40%{ top: -4em; }
49.9%{ top: -4em; }
50% { top: -5em; }
59.9%{ top: -5em; }
60%{ top: -6em; }
69.9%{ top: -6em; }
70%{ top: -7em; }
79.9%{ top: -7em; }
80%{ top: -8em; }
89.9%{ top: -8em; }
90%{ top: -9em; }
99.9%{ top: -9em; }
100% { top: -9em; }
}
@keyframes spinit {
0% { top: 0em; }
9.9% { top: 0em; }
10%{ top: -1em; }
19.9%{ top: -1em; }
20%{ top: -2em; }
29.9%{ top: -2em; }
30%{ top: -3em; }
39.9%{ top: -3em; }
40%{ top: -4em; }
49.9%{ top: -4em; }
50% { top: -5em; }
59.9%{ top: -5em; }
60%{ top: -6em; }
69.9%{ top: -6em; }
70%{ top: -7em; }
79.9%{ top: -7em; }
80%{ top: -8em; }
89.9%{ top: -8em; }
90%{ top: -9em; }
99.9%{ top: -9em; }
100% { top: -9em; }
}
/* Set the value according to the on-load position of the spinner */
#digit1 {
top: -4em;
/* -4em means 5 will be the number */
}
#digit2 {
top: -2em;
}
#digit3 {
top: 0em;
}
<div> <span id='digit1'>1 2 3 4 5 6 7 8 9 0</span> </div> <div> <span id='digit2'>1 2 3 4 5 6 7 8 9 0</span> </div> <div> <span id='digit3'>1 2 3 4 5 6 7 8 9 0</span> </div> <button id='spinner'>Spin It</button>
