CSS 正向过渡与反向过渡

前言

在CSS中,可以使用transition来实现过渡效果。
过渡效果

可以看到,这里实现的过渡效果,在变换和复原的过程中,过渡效果是相同的。但如果需要这两个过程的过渡效果不同时该怎么办。
本文简单讨论一下正向过渡和反向过渡的设置。(变换时的过渡效果称为正向过渡,复原时的过渡效果称为反向过渡)

正向过渡

  • transition属性设置在触发事件对应的伪类中,可只设置正向过渡。
    如下图所示,hover事件触发时,是有过渡效果的;而当复原时,没有过渡效果,是直接复原的。
    正向过渡

    正向过渡

    CSS代码

    .block{
    	width: 100px;
        height: 100px;
        background-color: cadetblue;
    }
    .block:hover{
        height: 200px;
        /* transition 写在hover中 */
        transition: height 0.5s linear 0s;
    }
    

反向过渡

  • transition属性设置在过渡元素的样式中,可同时设置正向过渡和反向过渡。
    如下图所示,正向过渡和反向过渡的效果是相同的。

    同时设置正向和反向过渡

    同时设置正向和反向过渡

    CSS代码

    .block{
    	width: 100px;
        height: 100px;
        background-color: cadetblue;
        /* 将transition 写在元素的样式中 */
        transition: height 0.5s linear 0s;
    }
    .block:hover{
        height: 200px;
    }
    
  • 在过渡元素及其对应的hover伪类中同时设置transition时,hover中设置的正向过渡会覆盖过渡元素中设置的正向过渡。此时过渡元素中设置的过渡效果只适用于反向过渡。
    分别设置正向和反向过渡

    分别设置正向和反向过渡

    CSS代码

    .block{
    	width: 100px;
        height: 100px;
        background-color: cadetblue;
        /* 反向过渡写在这里 */
        transition: height 0.2s linear 0s;
    }
    .block:hover{
        height: 200px;
        /* 正向过渡写在这里 */
        transition: height 1s linear 0s;
    }
    
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值