transition问题

transition问题

# 具体遇到的问题
老师 transition 是过渡属性 包括

transition-property     

transition-duration     

transition-timing-function    

transition-delay      


 transform是转变属性包括translate scale rotate

此处老师把transition和transform混合使用了是么 

也就是说把transition三个属性除了速度为1s以外的全部用transform替代了是么
# 报错信息的截图

# 相关课程内容截图
http://img1.sycdn.imooc.com//climg/5fc7368e097ea99006300214.jpg# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

在这里输入代码,可通过选择【代码语言】突出显示

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,理解不正确,具体如下:

transition过渡属性,包含4个小属性(同学写的那些),这些属性,可以连写在一起,如下:

transition:transition-property  transition-duration  transition-timing-function  transition-delay    

实例如下(按照顺序写)

transition:width 1s linear 2s;

其中后两个属性,可以省略,即可以简写成transition:width 1s ;意思是:width改变时,有过渡效果,该过渡1s匀速完成。

transition-property除了设置成width,也可以设置成transform,所以transition:transform 1s;的意思是:当transform中的某个属性(translate scale rotate)改变时,要添加过渡效果,该效果1s匀速完成。

可以敲下下面的例子体会下:

http://img1.sycdn.imooc.com//climg/5fc73a870977bbc406920430.jpg

祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师