Firefox игнорирует переход CSS3?
Итак, я пытался заставить переход правильно работать в firefox. Вот что у меня есть на данный момент:
index.html:
<button type = "button" id = "pushButton">Push Me!</button>
<div id = "loginBackground" class = "login-background">
<div id = "loginBox" class = "login-box-inactive">
</div>
</div>
global_style.css:
.login-background {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, 0.4);
}
.login-box-inactive, .login-box-active {
display: flex;
flex-flow: column nowrap;
min-width: 150px;
min-height: 150px;
background: #fff;
margin: auto;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
}
.login-box-active {
min-width: 350px;
min-height: 350px;
transition: width 2s, height 2s, ease-in-out, 0.5s;
}
наконец, login.js:
"use strict";
var pushButton = document.getElementById("pushButton");
var loginBackground = document.getElementById("loginBackground");
var loginBox = document.getElementById("loginBox");
pushButton.onclick = function() {
loginBackground.style.display = "flex";
loginBox.className = "login-box-active";
}
window.onclick = function(event) {
if (event.target == loginBackground) {
loginBackground.style.display = "none";
loginBox.className = "login-box-inactive";
}
}
AFAIK, почти каждый современный браузер на сегодняшний день стандартизировал тег перехода, так почему же Firefox полностью игнорирует тег перехода?
Спасибо!
Обновлено:
Итак, теперь в моем файле CSS есть следующее:
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in-out;
Chrome играет хорошо и отображает это должным образом. Firefox по-прежнему игнорирует их. Я даже поставил на них префикс -moz-, но он по-прежнему игнорировал их.
Обновлено еще раз:
Я бы хотел, чтобы после нажатия кнопки произошло следующее:
1) Пользователь нажимает кнопку Press Me!.
2) loginBackground затем накладывает любое содержимое ниже (представьте, что кнопка - не единственное содержимое на странице), не делая ни один из них интерактивным.
3) Затем у пользователя будет выбор: заполнить форму в loginBox или щелкнуть closeButton или loginBackground, оба из которых имеют следующий результат:
3.1) Когда пользователь щелкает либо closeButton, либо loginBackground, loginBox и loginBackground исчезают, оставляя содержимое внизу пригодным для использования.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
transition: width 2s, height 2s, ease-in-out, 0.5s;
Эта строка кажется неправильной. Попробуйте удалить последнее значение и переместить функцию синхронизации в отдельное свойство.
Кажется, это полностью все сломает
Проблема в том, что оба этих браузера по-разному обрабатывают свойство отображения. Выполнение вашего перехода зависит от свойства display объекта loginBackground, которое изначально имеет значение «display: none». Поле, изменяющее размер, является дочерним по отношению к этому разделу. Интересно, что происходит:
Firefox удаляет дочерний элемент родительского элемента, у которого есть display: none set
Вот что говорит отображаемый mdn-документ firefox:
Вот почему, когда вы переключаете отображаемое значение в firefox, переход не происходит, поскольку он как бы удаляется и вставляется заново; по сути, делая его не имеющим предыдущего значения для начала перехода.
Если применить класс "login-box-active" с небольшой задержкой, все заработает как положено.
"use strict";
var pushButton = document.getElementById("pushButton");
var loginBackground = document.getElementById("loginBackground");
var loginBox = document.getElementById("loginBox");
pushButton.onclick = function() {
loginBackground.style.display = "flex";
setTimeout(function() {
loginBox.className = "login-box-active";
}, 400)
}
window.onclick = function(event) {
if (event.target == loginBackground) {
loginBackground.style.display = "none";
loginBox.className = "login-box-inactive";
}
}.login-background {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, 0.4);
}
.login-box-inactive, .login-box-active {
display: flex;
flex-flow: column nowrap;
min-width: 150px;
min-height: 150px;
background: #fff;
margin: auto;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
}
.login-box-active {
min-width: 350px;
min-height: 350px;
transition: width 2s, height 2s, ease-in-out 0.5s;
}<button type = "button" id = "pushButton">Push Me!</button>
<div id = "loginBackground" class = "login-background">
<div id = "loginBox" class = "login-box-inactive">
</div>
</div>В любопытном случае Chrome он как бы не удаляет дочерний элемент display: none. Поэтому переход на нем работает как обычно.
Хотя я бы посоветовал использовать простую непрозрачность для достижения такого эффекта, вместо того, чтобы играть с дисплеем. Что-то вроде этого:
"use strict";
var pushButton = document.getElementById("pushButton");
var loginBackground = document.getElementById("loginBackground");
var loginBox = document.getElementById("loginBox");
pushButton.onclick = function() {
loginBackground.style.opacity = "1";
loginBox.className = "login-box-active";
}
window.onclick = function(event) {
if (event.target == loginBackground) {
loginBox.className = "login-box-inactive";
loginBackground.style.opacity = "0";
}
}.login-background {
opacity: 0;
position: fixed;
display: flex;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: rgba(0, 0, 0, 0.4);
transition: opacity 2s;
}
.login-box-inactive, .login-box-active {
display: flex;
flex-flow: column nowrap;
background: #fff;
width: 150px;
height: 150px;
margin: auto;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
transition: width 2s, height 2s, ease-in-out 0.5s;
}
.login-box-active {
width: 350px;
height: 350px;
}<button type = "button" id = "pushButton">Push Me!</button>
<div id = "loginBackground" class = "login-background">
<div id = "loginBox" class = "login-box-inactive">
</div>
</div>Это предполагаемое действие, которое я хотел! Спасибо!
Если это так, то можно ли разместить элемент
loginBackgroundперед всей веб-страницей и закрыть его без необходимости присутствияposition?