Почему непрозрачность не оживляет? - PullRequest
Новая
       13

Почему непрозрачность не оживляет?

1 голос
/ 07 июня 2019

В следующем коде «Пример A» не анимируется, а «Пример B» -.

Единственное отличие состоит в том, что A раньше не отображался, а B скрывался. 

document.getElementById('set').onclick = function() {
  document.getElementById('a').classList.add('clicked');
  document.getElementById('b').classList.add('clicked');
};

document.getElementById('reset').onclick = function() {
  document.getElementById('a').classList.remove('clicked');
  document.getElementById('b').classList.remove('clicked');
};
.example {
  background: blue;
  transition: opacity 2000ms ease;
}

.example.clicked {
  opacity: 0;
}

.example:not(.clicked) {
  opacity: 1;
}

#a:not(.clicked) {
  display: none;
}

#b:not(.clicked) {
  visibility: hidden;
}
<button id="set">Show and fade out</button>
<button id="reset">Reset</button>

<div id="a" class="example">Example A</div>
<div id="b" class="example">Example B</div>

Почему два разных поведения? Почему непрозрачность не всегда оживляет?

Ответы [ 2 ]

0 голосов
/ 07 июня 2019

Используйте height: 0 и height: auto вместо display: none.

Проверьте ответ: Переходы на дисплее: свойство

EDIT: display: none и display: block применяются мгновенно, поэтому я не думаю, что переход может работать. Используя setTimeout, он может работать, хотя. 

document.getElementById('set').onclick = function() {
  document.getElementById('a').style.display = "block";
  document.getElementById('a').style.opacity = 0;

  setTimeout(()=>{
    document.getElementById('a').style.opacity = 1;
  }, 0);
};

document.getElementById('reset').onclick = function() {
  document.getElementById('a').style.opacity = 0;
  setTimeout(()=>{
    document.getElementById('a').style.display = "none";
  }, 2000);
};
.example {
  background: blue;
  transition: opacity 2000ms ease;
  overflow: hidden;
  display: none;
}

.example.clicked {
  opacity: 1;
}

.example:not(.clicked) {
  opacity: 0;
}

#b:not(.clicked) {
  height: 0;
}
<button id="set">Show and fade out</button>
<button id="reset">Reset</button>

<div id="a" class="example">Example A</div>
<div id="b" class="example">Example B</div>
0 голосов
/ 07 июня 2019

Вы должны изменить display: none на #a:not(.clicked) на visibility: hidden, и тогда оно заработает.

display: none означает, что тег не появится. Хотя visibility: hidden означает, что для тега выделено место. Он отображается, но просто не виден. 

document.getElementById('set').onclick = function() {
  document.getElementById('a').classList.add('clicked');
  document.getElementById('b').classList.add('clicked');
};

document.getElementById('reset').onclick = function() {
  document.getElementById('a').classList.remove('clicked');
  document.getElementById('b').classList.remove('clicked');
};
.example {
  background: blue;
  transition: opacity 2000ms ease;
}

.example.clicked {
  opacity: 0;
}

.example:not(.clicked) {
  opacity: 1;
}

#b:not(.clicked), #a:not(.clicked) {
  visibility: hidden;
}
<button id="set">Show and fade out</button>
<button id="reset">Reset</button>

<div id="a" class="example">Example A</div>
<div id="b" class="example">Example B</div>
...