Переключить ключевые кадры CSS

У меня есть всплывающее окно, которое открывается при нажатии кнопки, а затем закрывается, если вы нажимаете другую кнопку или за пределами всплывающего окна. Я хочу, чтобы всплывающее окно появлялось при открытии и исчезало при закрытии. Как я могу переключаться между двумя ключевыми кадрами с помощью javascript?

Я пытался сделать это с помощью переключения классов с помощью javascript, но это не сработало.

var popup = document.getElementById("popup");
var popup_content = document.getElementById("popup_content");
var add = document.getElementById("add");
var span = document.getElementById("close");
add.onclick = function() {
  popup.style.display = "block";
  popup.className = "opened";
  popup_content = "opened";
}
span.onclick = function() {
  popup.style.display = "none";
  popup.className = "closed";
  popup_content = "closed";
}
window.onclick = function(event) {
  if (event.target == popup) {
    popup.style.display = "none";
    popup.className = "closed";
    popup_content = "closed";
  }
}

#popup {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

#popup_content {
  position: relative;
  margin: auto;
  background-color: white;
  width: 80%;
  max-width: 500px;
  border-radius: 5px;
  padding: 20px;
  text-decoration: none;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.5);
}

.closed {
  -webkit-animation-name: animate-in;
  -webkit-animation-duration: 0.6s;
  animation-name: animate-in;
  animation-duration: 0.6s;
}

.opened {
  -webkit-animation-name: animate-out;
  -webkit-animation-duration: 0.6s;
  animation-name: animate-out;
  animation-duration: 0.6s;
}

@-webkit-keyframes animate-in {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes animate-in {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@-webkit-keyframes animate-out {
  from {
    opacity: 1
  }
  to {
    opacity: 0
  }
}

@keyframes animate-out {
  from {
    opacity: 1
  }
  to {
    opacity: 0
  }
}

#close {
  float: right;
  cursor: pointer;
  margin: -15px -15px 0 0;
}

<button id = "add">Open popup</button>


<div class = "closed" id = "popup">
  <div class = "closed" id = "popup_content">
    <i class = "fas fa-times-circle" id = "close">Close</i> //////content
  </div>
</div>

Как лучше всего достичь моей цели?

javascript html css css-animations keyframe

06.06.2018 10:36

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

354

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Чтобы применить анимацию с помощью CSS. не используйте свойство или фрагмент display none / block. вместо этого вы можете использовать свойство перехода и свойство непрозрачности для постепенного появления / исчезновения.

Вот пример кода

    var popup = document.getElementById("popup");
    var popup_content = document.getElementById("popup_content");
    var add = document.getElementById("add");
    var span = document.getElementById("close");

    add.onclick = function() {
        popup.className = "opened";
        popup_content.className = "opened";
    }
    span.onclick = function() {

        popup.className = "closed";
        popup_content.className = "closed";
    }
    window.onclick = function(event) {
        if (event.target == popup) {

        popup.className = "closed";
        popup_content.className = "closed";
        }
    }

#popup {
            position: fixed;
            z-index: 1;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
        }
    
        #popup_content {
            position: relative;
            margin: auto;
        	background-color: white;
            width: 80%;
            max-width: 500px;
        	border-radius: 5px;
            padding: 20px;
        	text-decoration: none;
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
        }
    
        .closed {
            opacity:0;
           visibility:hidden;
           transition: opacity 0.8s ease;
        }
    
        .opened {
            opacity:1;
           visibility:visible;
           transition: opacity 0.8s ease;
        }
    
        #close {
            float: right;
            cursor: pointer;
            margin: -15px -15px 0 0;
        }

<button id = "add">Open popup</button>


<div class = "closed" id = "popup">
    <div class = "closed" id = "popup_content">
        <i class = "fas fa-times-circle" id = "close">Close</i>
             //////content
    </div>
</div>

06.06.2018 11:04

Ответ принят как подходящий

Я бы использовал переход - см. Комментарии в css и js о том, что я изменил:

var popup = document.getElementById("popup");
var add = document.getElementById("add");
var span = document.getElementById("close");
add.onclick = function() {
  popup.className = "opened";                // only need to transition the popup 
}
span.onclick = function() {
  popup.className = "closed";
}
window.onclick = function(event) {
  if (event.target == popup) {
    popup.className = "closed";
  }
}

#popup {
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  
  /* add the following and remove the display:none */
  transition: opacity 0.6s;
  opacity: 0;                /* start off closed and opacity 0 to hide */
}
#popup.opened {
  opacity: 1;        /* add opacity 1 so it transitions to be shown */
}

#popup.closed {
  /* this stops the popup from overlaying the content when closed */
  pointer-events:none;
}

#popup_content {
  position: relative;
  margin: auto;
  background-color: white;
  width: 80%;
  max-width: 500px;
  border-radius: 5px;
  padding: 20px;
  text-decoration: none;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.5);
}


#close {
  float: right;
  cursor: pointer;
  margin: -15px -15px 0 0;
}

<button id = "add">Open popup</button>


<div class = "closed" id = "popup">
  <div id = "popup_content">
    <i class = "fas fa-times-circle" id = "close">Close</i> //////content
  </div>
</div>

06.06.2018 11:07

Махмуд прав в использовании display: none / block при попытке ввести переход или анимацию. Переход также лучше всего здесь по сравнению с анимацией. Я не упомянул здесь, что использование classList.add / remove даст вам больше гибкости в использовании классов позже, поскольку это не вопрос, но я думаю, что это важное замечание. Здесь отличается включение атрибута видимости перехода в ваши открытые / закрытые классы. Поскольку видимость является двоичной, как при использовании display: none / block, это удалит переход с сайта. Например, при закрытии всплывающего окна видимость: скрыта; Атрибут будет выполняться в самом начале выполнения перехода. В результате вы никогда не увидите перехода при закрытии. Если вы включите видимость в свой переход, он будет выполняться в нужное время вашего перехода. Я тестировал это на firefox и chrome.

var popup = document.getElementById("popup");
        var popup_content = document.getElementById("popup_content");
        var add = document.getElementById("add");
        var span = document.getElementById("close");

        add.onclick = function() {
            popup.className = "opened";
            popup_content.className = "opened";
        }
        span.onclick = function() {

            popup.className = "closed";
            popup_content.className = "closed";
        }
        window.onclick = function(event) {
            if (event.target == popup) {

            popup.className = "closed";
            popup_content.className = "closed";
            }
        }

#popup {
            position: fixed;
            z-index: 1;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
        }

        #popup_content {
            position: relative;
            margin: auto;
            background-color: white;
            width: 80%;
            max-width: 500px;
            border-radius: 5px;
            padding: 20px;
            text-decoration: none;
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
        }

        .closed {
            opacity:0;
           visibility:hidden;
           transition: opacity 0.8s ease, visibility 0.8s ease;
        }

        .opened {
            opacity:1;
           visibility:visible;
           transition: opacity 0.8s ease, visibility 0.8s ease;
        }

        #close {
            float: right;
            cursor: pointer;
            margin: -15px -15px 0 0;
        }

<button id = "add">Open popup</button>


<div class = "closed" id = "popup">
    <div class = "closed" id = "popup_content">
        <i class = "fas fa-times-circle" id = "close">Close</i>
             //////content
    </div>
</div>

06.06.2018 12:05

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

Включить PHP-код в эхо

Редактирование динамического LI внутри UL с помощью кнопки

Как имитировать автофокус

Селектор CSS: не показывать пустой DIV без фонового изображения?

Кнопка ссылки на html файл в моих ресурсах

Стандартный размер холста HTML как для больших, так и для маленьких экранов

Преобразовать макет двух столбцов в слайдер в мобильном представлении

Пользовательский URL-адрес GET - str заменяет PHP

Наличие тега <button> полностью поверх элемента <div>

Проверка не позволяет моей форме отправить

Переключить ключевые кадры CSS

Ответы 3

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

Похожие вопросы