关于transition-property到底什么时候用呢?

关于transition-property到底什么时候用呢?

如下代码,不使用这个属性名也是可以,要实现这个代码效果,属性名不都是要添加:hover属性么,已经都指定了,那transition-property还有什么意义呢?老师能不能举个特别的例子来说明下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        *{

            padding:0;

            margin:0;

        }

       

        .one{

            width:300px;

            height:300px;

            background:#000;

            margin:300px auto;

            /*transition-property: ;*/

            

        }

        

        .one:hover{   

            cursor:pointer;

            transform: rotate(180deg);

            transition-duration:5s;

            transition-timing-function:linear;

            transition-timing-function:ease;

            transition-timing-function:ease-in;

            transition-timing-function:ease-out;

            transition-timing-function:ease-in-out;

            transition-delay:3s;

        }

    </style>

</head>

<body>

    <div class="one"></div>

    <div class="two"></div>

</body>

</html>


正在回答 回答被采纳积分+1

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

4回答
MuFan 2020-02-23 07:17:29

我是这么理解的。

设置property,可以给多个css样式设置不同的过渡效果。例如:

transition:height 1s ease-in-out 0s,width 2s ease-in-out 1s;

高度变化的过渡效果是1秒,延迟1s后是宽度的变化,宽度变化持续2秒。



  • 过度,需要用到控制过度的时候就用的上啦,此处不写property也没关系,

    然后如果是大批量的属性变化过度,确实使用all可能便捷一些,

    此外即使是单独的一个属性的变化,需要注意的是如果存在其他的属性变化需要检索,

    那么各自的检索应该用各自属性名property从而在transition中分离。

    感谢!!!



    2023-05-20 18:08:28
提问者 怒焰狂暴 2020-02-19 14:12:53

知道了,明白了

提问者 怒焰狂暴 2020-02-19 14:06:03

问题是我不需要添加这个属性,直接写background-color:gray;不是一样效果吗?

好帮手慕夭夭 2020-02-19 14:02:25

同学你好,如果不设置,默认值就是all ,就相当于如下:

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

all就表示hover中所有的样式都有过渡效果 ,建议同学按照如上例子测试一下。假如说只想让其中一个样式有过渡效果,就可以设置如下:

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

设置之后,只有背景色会有过渡效果。综上所述,如果所有的样式都需要过渡效果,那么可以不写。如果说指定某一个样式有过渡,就可以像上面一样写 。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

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

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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