Question

我试图理解CSS过渡 - 但我无法实现它。我想让一行从0到100％宽度，页面加载有一点延迟。我知道CS转换需要一个触发器，并尝试阅读jQuery或Vanilla Js解决方案，但卡住了。

为什么这个工作？ Jsfiddle：https://jsfiddle.net/1fzzgnwy/

<div class="container">
<span class="h-line"></span>
</div>

.h-line {
position: absolute;
z-index: -1;
width: 0%;
height: 10px;
right: 0;
background-color: #000;
top: 400px;
transition: right 1.5s linear;
transition-delay: 2s;
}

.h-line.ready {
width: 100%;
background-color: #000;
}

.container {
height:100%;
width:100%;
}

$(function(){
$('.h-line').addClass('ready');
});

Answer 1

您的jsfiddle链接（https://jsfiddle.net/1fzzgnwy/）中存在一些错误。

这是您的https://jsfiddle.net/50t3qwmL/工作代码的简化示例。


    .h-line {

        position: absolute;
        top: 0;
        right: 0;

        width: 20px;
        height: 20px;

        background-color: #000;
        transition: .3s;
        transition-delay: 2s;

    }

    .h-line.ready {

        width: 100%;

    }

在页面加载时启动css转换

1 个答案: