bootstrap-3更改導航欄摺疊的transition-property

請問任何人都可以解釋如何更改標準bootstrap-3導航欄中collapsing元素的transition-property？我想過渡到是這樣的，但與漢堡菜單上單擊時「頂」屬性：http://jsfiddle.net/2vLjU/1/bootstrap-3更改導航欄摺疊的transition-property

<div class="wrapper"> 
    <img id="slide" src="http://lorempixel.com/output/cats-q-c-100-100-4.jpg" /> 
</div> 

.wrapper { 
    position: relative; 
    overflow: hidden; 
    width: 100px; 
    height: 100px; 
    border: 1px solid black; 
} 

#slide { 
    position: absolute; 
    left: -100px; 
    width: 100px; 
    height: 100px; 
    background: blue; 
    transition: 1s; 
} 

.wrapper:hover #slide { 
    transition: 1s; 
    left: 0; 
}

來源

2017-08-04 Kaori

請看下面的例子中我在這裏提出： http://jsfiddle.net/f5jzo25t/

我用CSS3 '：目標'與'a'元素配合得很好。

img:target { 
    left: 0; 
    transition: 1s; 
}

你可以閱讀更多關於它： https://www.w3schools.com/cssref/sel_target.asp

希望這將有助於你

來源

2017-08-05 00:16:22 TalGabay

謝謝！但我的意思是如何實現這個引導，因爲它似乎有它自己的摺疊元素的JavaScript代碼，我有理解它的問題。 – Kaori

我發現這個：https：//www.bootply.com/dragan/3AZB0lGFyt。也許這會幫助你，在這個例子中，你只有jQuery的引導。 – TalGabay

似乎不是它再次。我認爲它與.collapsing課程有關。但是當我改變它時，由於某種原因它不起作用。 '.navbar-collapse.collapsing { position：relative; top：-100px; 溢出：隱藏; transition-property：top; transition-duration：0.1s; transition-timing-function：ease; }' – Kaori

bootstrap-3更改導航欄摺疊的transition-property

回答

相關問題