第一百三十章 CSS 过渡效果

明明在讲着 jQuery,却忽然又跳回了 CSS ,小老鼠的课程就是这么随性。从知识体系上说,这样确实不够合理。但是把相似的和有联系的内容放在一起去讲,就更容易理解一些。

前面我们学习了过渡效果和动画,那些是使用 jQuery 去实现的,方法很简单,想要什么都是一句话的事情。

但问题还可以更简单一些,因为 CSS 本身就可以实现过渡和动画的效果。强调,这是 CSS3,听说加上这个关键词你们的学习动力就会翻倍。再强调,目前过渡和动画都属于测试属性,简单说,就是最新的浏览器都支持,但是老一点的很可能就不支持。

所以,究竟用哪种方法去实现动画效果,你就要根据实际的情况进行取舍,而不能很武断的强行评价出一个谁优谁劣。

CSS 的过渡效果也非常好写,简单到可能几句话就把它讲完了。之所以放到这里再讲,是因为一方面我们可以把相似的内容放在一起都说了,另一方面,产生过渡就需要发生一个变化,而发生变化是需要事件去触发的。这些在不了解 JS 的时候也可以讲,但是理解的深度就要差上好多。

过渡效果,是当某个元素的属性发生变化的时候,在开始状态和结束状态之间,补齐一些中间值,使这个变化逐渐发生,而不是生硬的转变。这样逐渐发生变化,需要消耗一定的时长。

这个道理很简单,大家先记住,后面好多地方还要用到这个原理。

如果我们想让事情变简单,就可以使用类似动画中关键帧的方法,我给出一个开始状态,一个结束状态,中间的过程让程序按照一定的规则去自动生成。就好像说,你从 A 地走到 B 地,有了起点和终点,至于中间的过程,自己一步一步的走就对了。

回头我们前面所讲的各种效果,基本上也都是这么做的。现在要讲的 CSS 的过渡效果,也是一样的。

我们给这个元素设定的样式,就相当于已经给出了起始点。就是从当前样式开始进行变化。

目标样式又如何给出呢?我们可以对这个元素,进行样式的修改,或者给它增加删除类,总之,使得最终应用到这个元素上的样式发生改变。那么有了我们所讲的 jQuery 的基础,这里就不需要再展开了,你应该已经能够想到好几个办法了。

但是,我们前面也做过这些事情,为什么没有看到任何的过渡效果呢?

因为我们并没有指出这些属性的变化是需要进行过渡的,以及需要用多长时间进行这个过渡。

所以我们需要一个新的 CSS 属性去把这个事情说清楚,仅此而已。

#miao {transition: width 2s;}

transition 属性用来说明,有哪些属性需要进行过渡?花费多长时间去过渡。这里是如果元素的宽度发生变化,那么用 2 秒的时间去进行这个过渡。

如果有多个属性需要过渡呢?

#miao {transition: width 2s, height 2s;}

用逗号进行分隔,然后一项一项去写就行了。如果所有的属性都需要进行过渡,这么写好像有点累,于是我们可以使用关键字 all

#miao {transition: all 2s;}

就是能发生过渡的属性全都产生过渡效果。还有一个关键字 none,自然就是全都没有过渡效果了,那也就不需要给出时间了。

然后我们也可以给出两个时间,那么第一个时间就是延时,表示等待这么长时间之后再去发生过渡效果。而第二个时间依旧是过渡所需要的时长。我们已经发现了,我们可以对多个属性去分别设置它们的过渡时间,再利用上延时的功能,就可以让这些属性的变化依次进行:

#miao {transition: width 2s 3s, height 2s;}

最后时间可以使用小数进行表示。然后关于 CSS 的过渡效果,我们就讲完了。

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第一百三十章 CSS 过渡效果

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏