Внедрение и выход Div с CSS

http://jsfiddle.net/LJdAU/

    -o-transition:color .3s ease-out, background .5s ease-in-out;
    -ms-transition:color .3s ease-out, background .5s ease-in-out;
    -moz-transition:color .3s ease-out, background .5s ease-in-out;
    -webkit-transition:color .3s ease-out, background .5s ease-in-out;
    transition:color .3s ease-out, background .5s ease-in-out;

Я пытаюсь добавить и исчезнуть div-объект. Посмотри на скрипку. Я сделал затухание особенно долго, чтобы увидеть проблему.

Пункты меню (канада, германия и т. Д.) На ролловере работают нормально (то есть постепенно исчезают), но при развертывании не исчезают.

может кто-то заметить ошибку?

Спасибо!

ЛИНИИ 40-47 CSS-код, где код перехода он находится:)

1 ответ

Решение

Причина, по которой ваш переход обрезается таким образом, заключается в том, что у вас есть переход только на: hover, что вам нужно сделать, это на самом деле переместить это на селектор, который вы хотите перейти, так:

.collapsible, .page_collapsible {
    margin: 0;
    padding:8px;
    height:20px;
    border-top:#2b2b2b 1px solid;
    border-left:#2b2b2b 1px solid;
    border-right:#2b2b2b 1px solid;
    border-bottom:#2b2b2b 0px solid;
    background: black;
    font-family: Lato;
    text-decoration:none;
    text-transform:uppercase;
    color: #fff;
    font-size:1em;
    -o-transition:color .3s ease-out, background .5s ease-in-out;
  -ms-transition:color .3s ease-out, background .5s ease-in-out;
  -moz-transition:color .3s ease-out, background .5s ease-in-out;
  -webkit-transition:color .3s ease-out, background .5s ease-in-out;
  transition:color .3s ease-out, background .5s ease-in-out;
}

Вот обновленная скрипка: http://jsfiddle.net/LJdAU/1/

Другие вопросы по тегам