Html 绝对定位-webkit内部元件的过渡

我有一个

div

和

位置：绝对
：

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

当我将
width:100%
应用于
div.p1
时，它会设置动画，但内部元素不会移动（它们始终保持在同一位置）。另外，当
p1
具有
宽度：0%
时，我可以看到它的内部内容，我不知道为什么

编辑：

内部元素未更改位置，因为已设置位置：）。它足以移除激光等级的相对位置，并添加等级向右拉，如tihs：

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


p1
您希望在动画中发生什么？您实际上没有指定任何移动。0%->100%宽度。所以它从0px到100%的屏幕，但是没有内部元素。
<div class="p1">
    <div class="laser pull-right"></div>
    <h2>p1</h2>
</div>

.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;
}