Question

当以下代码在此fiddle中运行时，元素＆＃34; .title-wrap＆＃34;和＆＃34; .bg-wrap＆＃34;并排出现。任何人都可以告诉我如何做到这一点＆＃34; .bg-wrap＆＃34;自动占用＆＃34; .wrap＆＃34;最小的CSS变化。

HTML：

<div class="wrap selected">
       <div class="title-wrap"></div>  
       <div class="bg-wrap"></div>
</div>

的CSS：

.selected .title-wrap{
    position:initial !important;
    text-align: center;
    height:29.42px;
    animation:titleAnimation .2s;
        -webkit-animation:titleAnimation .2s;
         -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes titleAnimation 
{
from {left:85px;top:5px}
to {left:25px;top:5px}
}

.wrap .title-wrap{
    width:202px;
    display:block;
    position:absolute;
    top:5px;
    left:85px;
    background:black;
}


.selected .bg-wrap{
    background:green;
    height:700px;
    width:100%;
    animation:bgAnimation .2s;
        -webkit-animation:bgAnimation .2s; 
         -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes bgAnimation
{
from {left:85px;top:35px;}
to {left:205px;top:0px;}
}

.wrap .bg-wrap{
    display:block;
    position:absolute;
    top:35px;
    left:85px;  
}

Answer 1

对于你想要完成的事情并不积极，但我认为我有解决方案。我还清理了你的代码，它现在缩小了，更容易阅读。我还更新了跨浏览器使用。这是更新后的JSFiddle，其中包含必要的修复程序：http://jsfiddle.net/mLh7r/34/

HTML：

<div class="wrap selected">
    <div class="title-wrap titleAnimation"></div>
    <div class="bg-wrap bgAnimation"></div>
</div>

CSS：

@-webkit-keyframes titleAnimation {from{left:85px;top:5px}to{left:25px;top:5px}}
@-moz-keyframes titleAnimation {from{left:85px;top:5px}to{left:25px;top:5px}}
@keyframes titleAnimation {from{left:85px;top:5px}to{left:25px;top:5px}}

@-webkit-keyframes bgAnimation {from{left:85px;top:35px;}to{left:0px;top:0px;}}
@-moz-keyframes bgAnimation {from{left:85px;top:35px;}to{left:0px;top:0px;}}
@keyframes bgAnimation {from{left:85px;top:35px;}to{left:0px;top:0px;}}

.titleAnimation {
    -webkit-animation: titleAnimation ease-in 1s;
    -moz-animation: titleAnimation ease-in 1s;
    animation: titleAnimation ease-in 1s;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;    
}
.bgAnimation {
    -webkit-animation: bgAnimation ease-in 1s;
    -moz-animation: bgAnimation ease-in 1s;
    animation: bgAnimation ease-in 1s;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;    
}
.wrap .title-wrap, .wrap .bg-wrap {
    position: absolute;
    display: block;
    left: 85px;
}
.title-wrap {
    position:absolute !important;
    text-align: center;
    height:29.42px;
}
.bg-wrap {
    height:700px;
    width:100%;
    background:green;
    z-index: -1;
}
.wrap .title-wrap {
    width:202px;
    top:5px;
    background:black;
}
.wrap .bg-wrap {
    top:35px;
}

使用css获取Sibling html元素以占用整个父容器

1 个答案: