如何讓孩子過渡到左側而不是縮放？

Question

我試圖讓孩子的圖像幻燈片左側，消失就像父母。如果您現在運行剪切，則圖像縮放而不是向左滑動。

如何防止圖像縮放？並使圖像向左滑動並消失，就像父母一樣？

轉換將由媒體查詢觸發。

這是我的代碼。

.parent { 
 
    height: 130px; 
 
    width: 180px; 
 
    background-color: #fff; 
 
    border-bottom-right-radius: 10px; 
 
    border: 1px solid #000000; 
 
    text-align: center; 
 
    float: left; 
 
    position: fixed; 
 
    z-index: 1; 
 
    transition: ease all 0.3s; 
 
} 
 

 
.child { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-size: contain; 
 
    text-indent: -9999px; 
 
    display: block; 
 
    background-image: url(https://static.pexels.com/photos/34490/keyboard-computer-keys-white.jpg); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
} 
 

 
@media screen and (max-width: 655px){ 
 
    .parent { 
 
    visibility: hidden; 
 
    width: 1px; 
 
    } 
 
}

<div class="parent"> 
 
    <span class="child"> 
 
    </span> 
 
</div>

Answer 1

最簡單的辦法是設置爲visibility:visible;元素.child這個工作，但它不是由某些瀏覽器的支持。並且這是僅在hiding parent元素上使得child elementvisible的元素。

visibility屬性可用於同時留下 它本來的空間隱藏起來的元素。它也可以隱藏表格的行或列 。

解決方案 - 1 檢查此jsfiddle

.parent { 
 
    height: 130px; 
 
    width: 180px; 
 
    background-color: #fff; 
 
    border-bottom-right-radius: 10px; 
 
    border: 1px solid #000000; 
 
    text-align: center; 
 
    float: left; 
 
    position: fixed; 
 
    z-index: 1; 
 
    transition: ease all 0.3s; 
 
} 
 

 
.child { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-size: contain; 
 
    text-indent: -9999px; 
 
    display: block; 
 
    background-image: url(https://static.pexels.com/photos/34490/keyboard-computer-keys-white.jpg); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
} 
 

 
@media screen and (max-width: 655px){ 
 
    .parent { 
 
    visibility: hidden; 
 
    width: 1px; 
 
    } 
 
    .child{ 
 
    width:180px; 
 
    height:130px; 
 
    visibility:visible; 
 
    background-size:100% 100%; 
 
    } 
 
}

<div class="parent"> 
 
<span class="child"> 
 
</span> 
 
</div>

解決方案 - 2
檢查此jsFiddle

創建two不同元件和hide使用opacity。

#bx{ 
 
    width:200px; 
 
    height:130px; 
 
    background:#111; 
 
    transition: ease all 0.3s; 
 
} 
 
#b{ 
 
    width:200px; 
 
    height:120px; 
 
    top:13px; 
 
    left:8px; 
 
    position:absolute; 
 
    background-image: url(https://static.pexels.com/photos/34490/keyboard-computer-keys-white.jpg); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size:100%; 
 
    margin-left:0; 
 
    transition: ease all 0.3s; 
 
} 
 
@media screen and (max-width: 655px){ 
 
    #bx{ 
 
    width:1px; 
 
    opacity:0; 
 
    } 
 
    #b{ 
 
     margin-left:-220px; 
 
    } 
 
}

<div id="bx"></div> 
 
<div id="b"></div>

Answer 2

退房的例子，你需要了解。我可以建議你

.sibling { 
 
    width:300px; 
 
    height:56px; 
 
    background-color:hsla(40, 50%, 60%, .6); 
 
    position:absolute; 
 
    left:240px; 
 
} 
 
.parent { 
 
    visibility:visible; 
 
    width:170px; 
 
    height:170px; 
 
    border-radius:50%; 
 
    background-image: linear-gradient(90deg, hsla(10, 90%, 50%, 1) 50%, hsla(100, 90%, 50%, .0) 50%); 
 
    position:absolute; 
 
    -webkit-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
    -webkit-transition:0s; 
 
    transition:0s; 
 
} 
 

 
.sibling:hover ~ .parent { 
 
    visibility:visible; 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    -webkit-transition: .6s ease-in .2s; 
 
    transition: .6s ease-in .2s; 
 
} 
 
.child { 
 
    width:150px; 
 
    height:150px; 
 
    border-radius:50%; 
 
    background-image: linear-gradient(90deg, hsla(5, 35%, 50%, 1) 50%, hsla(100, 90%, 50%, .0) 50%); 
 
    position: relative; 
 
    top: 10px; 
 
    left: 10px; 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    -webkit-transition:0s; 
 
    transition:0s; 
 
} 
 
.sibling:hover ~ .parent > .child { 
 
    -webkit-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
    -webkit-transition: .1s ease-in .9s; 
 
    transition: .1s ease-in .9s; 
 
}

<div class="sibling"></div> 
 
<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Answer 3

爲什麼.child與父母消失的原因是：

1. ...的.child's高度和寬度的.parent 100％。猜猜.child's height and width are when .parent的寬度和高度是1px和130px（提示：什麼是100px的1px和100px的130px？）

2. 另一個原因是因爲有visibility:hidden元素的所有兒童將被隱藏的很好，除非子元素已visibility: visible明確設置（必須有它作爲一個聲明CSS規則）

因此，瞭解這一點，我們應該克服這些屬性時MQ（媒體查詢）在踢詳情載於下文片段評論：

.child { 
    width: 100%; 
    height: 100%; 
    background-size: contain; 
    text-indent: -9999px; 
    display: block; 
    background-image: url(https://static.pexels.com/photos/34490/keyboard-computer-keys-white.jpg); 
    background-repeat: no-repeat; 
    background-position: center center; 
    /* These properties were added so that `.child` is in the normal 
    || "flow" to which `.parent` is not due to it having `position: fixed` 
    */ 
    position: relative; 
    right: 0; 
    bottom: 0; 
} 

@media screen and (max-width: 640px) { 
    .parent { 
    visibility: hidden; 
    width: 1px; 
    } 
    /* This ruleset will counter the properties 
    || that were previously discussed 
    */ 
    .child { 
    visibility: visible; 
    min-width: 180px; 
    min-height: 130px; 
    } 
} 

代碼片段

.parent { 
 
    height: 130px; 
 
    width: 180px; 
 
    background-color: #fff; 
 
    border-bottom-right-radius: 10px; 
 
    border: 1px solid #000000; 
 
    text-align: center; 
 
    float: left; 
 
    position: fixed; 
 
    z-index: -1; 
 
    background: red; 
 
} 
 

 
.child { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-size: contain; 
 
    text-indent: -9999px; 
 
    display: block; 
 
    background-image: url(https://static.pexels.com/photos/34490/keyboard-computer-keys-white.jpg); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    position: relative; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 

 
@media screen and (max-width: 640px) { 
 
    .parent { 
 
    width: 1px; 
 
    overflow-x: hidden; 
 
    transition: width 0.3s ease; 
 
    } 
 
    .child { 
 
    visibility: visible; 
 
    max-width: 0px; 
 
    min-height: 130px; 
 
    transition: transform 1s ease-out; 
 
    transform: translateX(-180px); 
 
    } 
 
}

<div class="parent"> 
 
    <span class="child"> 
 
    </span> 
 
</div>