一般用来做简易的动画,从一个状态渐渐过渡到另一个状态,它的语法是这样的
属性是像宽度,高度,位置,背景颜色这种。必选参数
花费时间单位是s,必须要写单位。可以使用浮点秒数,比如0.5s,必选参数
运动曲线是指渐变的速度情况,比如前快后慢,前慢后快这种,默认是ease,我们一般不用动这个。可选参数
何时开始的单位是s,默认是0s,如果要更改的话必须要写单位,我们可以在这里设置延时触发,可以使用浮点秒数。可选参数,当你只想写何时开始而不写运动曲线是不行的,当只想改动何时开始的时候,前面要给一个ease
很像pyqt5中的动画组 91.动画的简单使用_Suyuoa的博客-CSDN博客
我们做一个例子,我们现在有一个青色的盒子,我现在想让他在鼠标移动上去的时候用5s时间变为橙色
- 哪一个元素做过渡效果,transition就给谁
刚开始打开后是这样的
放了一会儿是这样的
最后是这样的
那么如果你想同时改多个属性,你要这样写
现在打开后是这样的
放了一会儿是这样的
最后是这样的
这样写其实很麻烦,我们现在只有两个,以后多个的时候会很麻烦,所以如果需要多个属性变化,我们一般将属性写成all,然后在hover(或别的什么状态)中控制要变化的属性
经测试同样可以实现过渡效果
这样写的缺点就是不能控制每一个属性的具体过渡参数(比如时间)了,但实际开发中对时间的要求并不是很多
我们下面搞两个例子
目录
1 简易进度条效果
我们现在使用过渡属性做一个简易的进度条效果
打开后是这样的
鼠标放上去一会儿是这样的
放5s或更长时间之后是这样的
2 图标切换效果
这个实际上是使用精灵图的原理,我现在有这样一张图,它的名字是icons.png
代码是这样的
打开后是这样的
运行过程中是这样的
船会从右侧出来,飞机会从左侧走