CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
mohammedtair
mohammedtair

Reputation: 3

i have issue in css with transition it can't move smoothly in menu bar?

i have issue in CSS it can't move smoothly in menu bar, the menu in this link can anyone help me thanks .

here is the link jsfiddle.

i try this but nothing work :

.div-move{
   -webkit-transition: width 1s ease-in-out;
   -moz-transition: width 1s ease-in-out;
   -o-transition: width 1s ease-in-out;
   transition: width 1s ease-in-out;
}

Upvotes: 0

Views: 83

Answers (2)

herrfischer
herrfischer

Reputation: 1828

You want to transform to an "auto" value that was one of the problems.

.notification-bar:hover .text-header-move{
    width:auto;
}

Take a look at this fiddle: http://jsfiddle.net/herrfischerhamburg/jok48kpz/2/

I updated the fiddle to work with a "max-width", i think this is the better solution for you than the fixed width.

Upvotes: 1

Benneb10
Benneb10

Reputation: 1489

You can't transition to width:auto, but by using max-width is automatically with use the size of your text. Just make sure the :hover width is longer then the text you use so it will all appear. Also I suggest using a transition on both hover and regular classes so you also have a transition when you mouse off the menu. Try changing these classes:

.text-header-move{
    max-width: 0px;
    float: right;
    overflow: hidden;     
    -webkit-transition: max-width 1s ease-in-out;
    -moz-transition: max-width 1s ease-in-out;
    -o-transition: max-width 1s ease-in-out;
    transition: max-width 1s ease-in-out;   
}
.notification-bar:hover .text-header-move{
    max-width:400px;   
    -webkit-transition: max-width 1s ease-in-out;
    -moz-transition: max-width 1s ease-in-out;
    -o-transition: max-width 1s ease-in-out;
    transition: max-width 1s ease-in-out;    
}

Upvotes: 1

Related Questions