轉型在右左的div的div寬度和反之亦然

請參閱本的jsfiddle：https://jsfiddle.net/b53te5qb/1/轉型在右左的div的div寬度和反之亦然

我試圖讓每個格寬度很好地比其他過渡。

現在它是一個即時效果，但我希望它順利過渡。當我嘗試過渡時，它開始變得越野車。

下面是HTML：

<div class="outer"> 
    <div class="color left"></div> 
    <div class="color right"></div> 
</div>

這裏是CSS至今：

.outer { 
    position: relative; 
    height: 100px; 
    width: 200px; 
} 

.color { 
    height: 50px; 
    width: 50%; 
    float: left; 
    transition: width 0.3s linear; 
    -webkit-transition: width 0.3s linear; 
} 

.color:hover { 
    width: 100%; 
    position: absolute; 
} 

.left { 
    background-color: #ff0; 
} 

.right { 
    background-color: #0ff; 
}

我願意接受這個改制但是我需要，以完成任務。我只是提供了這個作爲基礎的例子。

來源

2017-08-02 tbcrawford

可以這樣https://jsfiddle.net/xm5dwzsL/做雖然基於什麼這2個元素可能包含，一個可能需要以另一種方式在做這個。 – LGSon

只有一個在絕對位置會做，z-index可以用於重疊問題https://jsfiddle.net/b53te5qb/1/ –

@GCyrillus你發佈了與OP在問題中相同的小提琴鏈接:) – LGSon

在這裏你去：https://jsfiddle.net/prowseed/b53te5qb/10/

兩個技術，一個有Flexbox的和一個絕對位置，隨便選:)

.outer { 
    position: relative; 
    height: 100px; 
    width: 666px; 
    display:flex; 
} 

.color { 
    flex: 1; 
    height: 100%; 
    transition: .3s; 
} 

.color:hover { 
    flex-basis:100%; 
} 

.outer2 { 
    margin-top:100px; 
    position: relative; 
    height: 100px; 
    width: 666px; 
} 

.outer2:hover .color { 
    width:0; 
} 

.outer2 .color { 
    position:absolute; 
    top:0; 
    left:0; 
    bottom:0; 
    width:50%; 
    } 

    .outer2 .color + .color { 
    left:auto; 
    right:0; 
    } 

    .outer2 .color:hover { 
    width:100%; 
    z-index:2; 
    }

來源

2017-08-02 19:23:09

您需要將它們絕對放置以避免它們移動。

https://jsfiddle.net/b53te5qb/6/

我會強烈建議不要轉變寬度，更好的將是過渡transform: translateX()，因爲這將是硬件加速和更順暢：https://jsfiddle.net/b53te5qb/8/。

它仍然需要拋光，但想法在那裏。（注意overflow: hidden以避免顯示過多）。另一個改進是將頂部的兩個元素（50％/ 50％寬度）通過javascript觸發懸停，因爲當元素移動時很難將鼠標懸停在它們上面，或者在不離開.outer組件的情況下移除懸停。

希望它有幫助。

來源

2017-08-02 19:22:17 Cherna

如果你只是在做這與純色，我會過渡transform: scaleX()。使用transition和transform可以提供更好的性能。

.outer { 
 
    position: relative; 
 
    height: 100px; 
 
    width: 200px; 
 
} 
 

 
.color { 
 
    height: 50px; 
 
    width: 50%; 
 
    float: left; 
 
    transition: transform 0.3s linear; 
 
    -webkit-transition: transform 0.3s linear; 
 
    transform-origin: 0 0; 
 
} 
 

 
.color:hover { 
 
    transform: scaleX(2); 
 
} 
 

 
.left { 
 
    background-color: #ff0; 
 
} 
 

 
.right { 
 
    background-color: #0ff; 
 
    transform-origin: 100% 0; 
 
}

<div class="outer"> 
 
    <div class="color left"></div> 
 
    <div class="color right"></div> 
 
</div>

來源

2017-08-02 19:25:23

轉型在右左的div的div寬度和反之亦然

回答

相關問題