2017-08-04 90 views
0

請問任何人都可以解釋如何更改標準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; 
} 

回答

0

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

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

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

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

希望這將有助於你

+0

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

+0

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

+0

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