来自 金沙js77888 2020-04-06 22:35 的文章
当前位置: 金沙js77888 > 金沙js77888 > 正文

其可以让属性变化成为一个持续一段时间的过程

CSS transitions提供了一种在更改CSS属性时控制动画速度的方法详解点这 。

图片 1u=3294564858,810299706&fm=27&gp=0.jpg

其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的。比如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色,按照一定的曲线速率变化。这个过程可以自定义。语法简写:div { transition: <property> <duration> <timing-function> <delay>; }transition是一种过渡效果,执行一次。好了,看完详解,相信您一定会感叹神奇的css,是的,下面我们来说个栗子,感受一下它的魅力。任务描述

  • 如图,实现一个类似棋盘的格子空间,每个格子用两个数字可以定位,一个红正方形的DOM在这个空间内,正方形中的蓝色边表示这是他的正面,有一个input输入框。

图片 2图片.png

  • 在输入框中允许输入如下指令,按下按钮后,使得正方形做相应动作GO:向蓝色边所面向的方向前进一格(一格等同于正方形的边长)TUN LEF:向左转TUN RIG:向右转TUN BAC:向右转TRA LEF:向屏幕的左侧移动一格,方向不变TRA TOP:向屏幕的上面移动一格,方向不变TRA RIG:向屏幕的右侧移动一格,方向不变TRA BOT:向屏幕的下面移动一格,方向不变MOV LEF:方向转向屏幕左侧,并向屏幕的左侧移动一格MOV TOP:方向转向屏幕上面,向屏幕的上面移动一格MOV RIG:方向转向屏幕右侧,向屏幕的右侧移动一格MOV BOT:方向转向屏幕下面,向屏幕的下面移动一格
  • 每个指令的执行时间是1sGO和TUN LEF为例在没用transition的情况下,单纯用原生js实现,查看全部代码。思路GO:用定时器来实现1秒动画。假设每个格子是50px大小,1秒内移动50px那么可以每隔10ms移动0.5px,循环100次。代码如下:
for (var i = 1; i < const_movetimes   1; i  ) { var x = (function { return function() { obj.style.left = (left - index * 50 / const_movetimes) <= 0 ? 0 : (left - index * 50 / const_movetimes)   'px'; if (index === const_movetimes) clearTimeout; var t = setTimeout(x, 1000 / const_movetimes * i);}

TUN LEF:用定时器来实现1秒动画。旋转deg,若仍执行100次,那么每次转动deg/100。代码如下:

for (var i = 1; i < 101; i  ) { var y = (function { return function() { box.style.transform = 'rotate('   (changdeg   deg / 100 * index) % 360   'deg)'; if (index === 100) { clearTimeout; } } }) var t = setTimeout; }

存在问题:以上的实现没有对多次点击做处理,因此在当前动画还没结束时,若又点击执行按钮后,会出现问题,动画不会移动到正确位置。使用transition查看全部代码在css样式表中添加:

transition: all 1s; 

那么在js中简单一行代码就可完成。

//goobj.style.left = (left - 50) <= 0 ? 0 : (left - 50)   'px';

//roatebox.style.transform = 'rotate('   (changdeg   deg) % 360   'deg)';

重点来了,使用transition后发现,原先的问题不存在了。自动处理动画队列,多次点击执行按钮,也会准确执行。由此可见省了不少代码,css3不可小觑。

本文由金沙js77888发布于金沙js77888,转载请注明出处:其可以让属性变化成为一个持续一段时间的过程

关键词: 代码 transition