最近的工作以移动端项目居多,经常会涉及一些比较小的动画效果,所以使用css3设计动画效果也就越发熟练起来。但是不得不承认,一直以来都是凭感觉使用transform, transition, animation,而没有深究过这三者之间的真正的内在的区别,以及一些触发条件。
仅仅知道从字面上理解这三者:
transform: 变形
transition: 过渡
animation:动画
transform基本上用在静态元素的变形上面,其本身并不具备动画效果,所以此处略去不说。
关于animation前面也踩到了坑,也填过一些坑,至少目前在使用上问题不太大了,今天做的一个效果是:活动结束页面上,有一艘小船,为了具有一点形象性的意义,我给小船做了一个移除页面的动画,移除页面,不能再回来了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .over-ship{ width : 4.5 rem; height : 2.85 rem; margin-top : 1 rem; float : right ; background : url (../../images/saishihui/ship.png) no-repeat center center / contain; /**小小船只的图片*/ -webkit-animation: leaveOver 3 s ease-in; animation: leaveOver 3 s ease-in; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; } @-webkit-keyframes leaveOver{ 100% { margin-right : -4.5 rem; } } @keyframes leaveOver{ 100% { margin-right : -4.5 rem; } } |
w3scool上解释:animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见。
用法:animation-fill-mode : none | forwards | backwards | both;
知道用法即可。
这里更多关注一下transition。用法不多说,主要说一下transition的触发方式。
一般分为伪类触发,媒体查询触发,JavaScript触发。
常用伪类触发包括:hover、:focus、:active等,应该比较熟悉。
媒体查询触发,从字面意思也基本能够理解。
主要说一下JavaScript触发,一直以来,我都是认为,给一个DOM元素添加不同的class,在新增的class里面设置transition,通过addClass(newClass)即可触发transition,但是今天在项目中使用该方法之后,发现并不能触发这个transition,然后就是各种搜索原因。
发现可以通过DOM操作其css属性,实现transition的过渡效果。
1 | $( '.override' ).get()[0].style.setProperty( 'opacity' , 1); |
这时就能够触发从opacity从0到1的效果,有一点需要注意的是如果dom元素先设置了dispaly=none的属性,则需要在 js改变其为display:block
后延迟一段时间之后再去设置其他过渡动画,否则该过渡动画不会触发。
1 2 3 4 5 | // 点击关闭按钮。关闭弹框 $( '.override' ).addClass( 'in' ); // 设置.override显示 setTimeout( function () { // 延迟设置opacity显示的动画 $( '.override' ).get()[0].style.setProperty( 'opacity' , 1); }, 300); |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】博客园携手 AI 驱动开发工具商 Chat2DB 推出联合终身会员
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步