html - 绝对定位-webkit-内部元素的过渡

Question

我有一个 div 带有 position: absolute:

<div class="p1">
    <div class="laser"></div>
    <h2>p1</h2>
</div>

使用这个 CSS:

.p1{
    position:absolute;
    top:46px;
    left:0px;
    width: 0%;
    height: calc(100% - 46px);
    background-color: blue;
    z-index: 2;
    -webkit-transition: width 4s ease;
    -moz-transition: width 4s ease;
    -o-transition: width 4s ease;
    -ms-transition: width 4s ease;
    transition: width 4s ease;
}

.laser{
    height: 100%;
    width: 3px;
    background: #ff0000;
    position: relative;
    top: 46px;
    left: 0px;
    display: block;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-box-shadow: 0 0 20px 10px #ff0000;
    -moz-box-shadow: 0 0 20px 10px #ff0000;
    box-shadow: 0 0 20px 10px #ff0000;
    z-index: 3;
}

当我将 width: 100% 应用于 div.p1 时，它会产生动画，但内部元素不会移动(它们总是留在同一个地方)。此外，当 p1 具有 width: 0% 时，我可以看到它的内部内容，但我不知道为什么。

编辑:

内部元素不会改变位置，因为位置已设置 :)。它足以删除激光类的相对位置并添加像 tihs 这样的右拉类:

<div class="p1">
    <div class="laser pull-right"></div>
    <h2>p1</h2>
</div>

Answer 1

.p1{
    position:absolute;
    top:46px;
    left:0px;
    width: 0%;
    height: calc(100% - 46px);
    background-color: blue;
    z-index: 2;
    -webkit-transition: width 4s ease;
    -moz-transition: width 4s ease;
    -o-transition: width 4s ease;
    -ms-transition: width 4s ease;
    transition: width 4s ease;
}

.laser{
    height: 100%;
    width: 100%;   /*You have to change width from 3px to 100% and it will works */
    background: #ff0000;
    position: relative;
    top: 46px;
    left: 0px;
    display: block;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-box-shadow: 0 0 20px 10px #ff0000;
    -moz-box-shadow: 0 0 20px 10px #ff0000;
    box-shadow: 0 0 20px 10px #ff0000;
    z-index: 3;
}