Fade-in и появляются, исчезают и исчезают, используя только css?

Я пытаюсь создать меню, которое исчезает в/из при нажатии кнопки, и я пытаюсь сделать анимацию с помощью переходов CSS.Fade-in и появляются, исчезают и исчезают, используя только css?

Вот пример того, что я хочу достичь

#menu{ 
    background: red; 
    display: block;  
    overflow: hidden; 
    position: absolute; 
    width: 182px; 
    top: 1em; 
    padding: 0; 
    height: auto; 
    opacity: 0; 
    /* The menu must not be clickable/cover the UI once hidden */ 
    left: -100000px; 

    /* 
    The left property must change after the 
    opacity is zero and before it starts to 
    increase 
    */ 
    transition: opacity 0.25s 0.1s, left 0s; /* ??? */ 
    -webkit-transition: opacity 0.25s 0.1, left 0s; /* Safari */ 
} 

#menu.open{ 
    opacity: 1; 
    left: auto; 
}

http://jsfiddle.net/AzKAk/5/

Конечно, который работает только на полпути, когда меню появляется это ДЕЙСТВИТЕЛЬНО выгорает, но, когда он должен исчезать , это должно произойти после того, как элемент имеет свое правильное положение.

Возможно ли такое, используя только CSS3?

источник

2013-08-02 Loupax

да возможно, но я не понимаю, чего вы хотите? –

Я хочу, чтобы меню переключалось с fade in/out, но я не хочу, чтобы он оставался там, когда его непрозрачность равна нулю, в результате чего ui за ней становится непригодным. Я действительно хочу, чтобы он был вне экрана или 'display: none', но только после того, как его непрозрачность равна нулю – Loupax

http://www.greywyvern.com/?post=337 Посмотрите на это, я надеюсь, что это может вам помочь. –

Я предполагаю, что ваше намерение состоит в том, чтобы меню отображалось/исчезало на месте без какого-либо движения.

Для этого вам фактически необходимо использовать комбинацию из двух свойств: opacity и display.

Изменение непрозрачности заставит меню исчезнуть, но как только оно достигнет opacity:0, оно будет невидимым, но все еще существовать и получать взаимодействие с пользователем.

Итак, вы должны убедиться, что после перехода непрозрачности вы должны изменить display на none.

Вы можете сделать это, используя событие transitionend (webkitTransitionEnd на Chome/Safari).

Ваш код будет выглядеть примерно так: http://jsfiddle.net/daniran/GfbVV/

Я использую JQuery в примере, но вы можете так же легко зарегистрировать слушателей непосредственно с помощью ontransitionend собственности;

источник

2013-08-02 09:35:29

Fade-in и появляются, исчезают и исчезают, используя только css?

ответ

Смежные вопросы