Trasition border-bottom?

Question

Я пытаюсь затухать в border-bottom, и я не могу заставить его работать. Вот что я пробовал:

#navBar a:hover { 
     -webkit-transition: all 0.5s; 
     -moz-transition: all 0.5s; 
     transition: all 0.5s; 
     border-bottom: 1px solid #fff; 
     } 

Он просто продолжает появляться без перехода. Что я делаю не так?

Answer 1

Проблема заключается в том, что вы пытаетесь перейти, добавив рамку, которая не работает. Вы можете, однако, цвет границы перехода от transparent к #FFF:

HTML:

<div id="navBar"> 
    <a>Link</a> 
</div> 

CSS:

#navBar a { 
    border-bottom: 1px solid transparent; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
    transition: all 0.5s; 
} 
#navBar a:hover { 
    border-bottom: 1px solid #FFF; 
} 

скрипку: Fiddle

Answer 2

Если вы хотите перейти от границы к белой, вы все равно должны писать атрибут по умолчанию, потому что переход не сделает этого для вас.

http://jsfiddle.net/ZmUAw/3/

#navBar a { 
    text-decoration: none; 
    border-bottom: 1px solid transparent; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
    transition: all 0.5s; 
} 

И после того, что вы можете изменить его на белый с переходом

#navBar a:hover { 
    border-bottom: 1px solid #000; 
}