Анимировать наложение CSS в FadeIn и FadeOut

У меня есть наложение css, которое закрывает весь видовой экран при нажатии кнопки. Он fadesIn от opacity: 0 до opacity: 1 с использованием ключевых кадров css.Анимировать наложение CSS в FadeIn и FadeOut

Оверлей зависит от плагина js, добавляющего класс к элементу <body>. Поэтому, когда этот класс применяется, наложение установлено на display: block

Я пытаюсь анимировать этот эффект в обратном порядке. Поэтому, когда класс удаляется, наложение исчезает.

Я понимаю, что могу применить несколько анимаций к классу .overlay, но я не уверен, как действовать дальше.

Любые идеи, как я мог бы изменить анимацию?

.overlay { 
    // Overlay base styles 
    position: fixed; 
    background: rgba(0, 0, 0, 0.75); 
    width: 100%; 
    height: 100%; 
    display: none; 
    z-index: 999999; 
    cursor: pointer; 

    // Set transition for overlay 
    -webkit-transition:   all 425ms ease-in-out; 
    -moz-transition:   all 425ms ease-in-out; 
    -ms-transition:    all 425ms ease-in-out; 
    -o-transition:    all 425ms ease-in-out; 
    transition:     all 425ms ease-in-out; 


    // Set the animation duration 
    -webkit-animation-duration: 1.1s; 
    -moz-animation-duration:  1.1s; 
    -ms-animation-duration:  1.1s; 
    -o-animation-duration:  1.1s; 
    animation-duration:   1.1s; 

    // Set the animation fill mode 
    -webkit-animation-fill-mode: both; 
    -moz-animation-fill-mode:  both; 
    -ms-animation-fill-mode:  both; 
    -o-animation-fill-mode:  both; 
    animation-fill-mode:   both; 

    // Name the Animation 
    -webkit-animation-name:  fadeIn; 
    -moz-animation-name:   fadeIn; 
    -ms-animation-name:   fadeIn; 
    -o-animation-name:   fadeIn; 
    animation-name:    fadeIn; 
} 

// When is showing class is applied 
// make the overlay display block 
.scotch-is-showing .overlay { 
    display: block; 
} 

// Setup keyframes animations 
// Chrome 
@-webkit-keyframes fadeIn { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 

// Firefox 
@-moz-keyframes fadeIn { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 

// Opera 
@-o-keyframes fadeIn { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 

// All other browsers 
@keyframes fadeIn { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
}

источник

2015-06-22 KJ Prince

Я думаю, вместо использования ключевого кадра я мог бы просто добавить 'opacity: 1;' классу, который показывает наложение, и 'opacity: 0;' классу '.overlay', а затем сделать простой переход вместо анимация. –

Я бы, вероятно, использовал вспомогательный класс, а затем переключил этот класс, чтобы вызвать анимацию.

Как это:

.overlay { 
    // Overlay base styles 
    position: fixed; 
    background: rgba(0, 0, 0, 0.75); 
    width: 100%; 
    height: 100%; 
    display: none; 
    z-index: 999999; 
    cursor: pointer; 

    opacity: 0; 

    -webkit-transition:   all 1.1s ease-in-out; 
    -moz-transition:   all 1.1s ease-in-out; 
    -ms-transition:    all 1.1s ease-in-out; 
    -o-transition:    all 1.1s ease-in-out; 
    transition:     all 1.1s ease-in-out; 
} 
.scotch-is-showing .overlay{ 
     display:block; 
     opacity: 1; 
    }

Вам не нужно ключевые кадры с момента его просто изменяя непрозрачность от 0 до 1.

Переключите с помощью JavaScript fadeIn класса. Добавление его будет исчезать в наложении, и его удаление исчезнет.

с помощью JQuery это может выглядеть следующим образом:

$('.overlay').toggleClass('fadeIn');

UPDATE

я пропустил часть о плагине и display тумблера. Это должно по-прежнему работать, вам просто не нужно беспокоиться о переключении javascript. Я обновил селектор css в приведенном выше CSS. display не переходит, но непрозрачность делает.

источник

2015-06-23 00:05:56 zgood

Помните, что выцветшее наложение по-прежнему препятствует просмотру. Вам также необходимо установить таймерное событие, чтобы скрыть макет. – Myst

@Myst Я обновил свой ответ. Я пропустил часть о 'display' – zgood

Анимировать наложение CSS в FadeIn и FadeOut

ответ

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