CSS непрозрачность перехода к нулю немедленно - PullRequest
Новая
       24

CSS непрозрачность перехода к нулю немедленно

0 голосов
/ 04 июля 2018

Я не могу понять, почему составной переход (непрозрачность и высота) для одного и того же элемента не соответствует ожидаемой продолжительности. Однако эта проблема возникает только при первом запуске, а затем начинает работать идеально.

UPDATE:

Я нашел более тонкий способ продемонстрировать проблему.

При нажатии кнопки «Пуск» поле справа становится сразу прозрачным и не исчезает медленно, как левое. 

$("button").on("click", function() {
  doNative();
  doJQuery();
});

function doNative() {
  const elem = document.getElementById("bn");
  elem.style.opacity = 0;
  elem.style.height = 0;
  elem.style.transitionDuration = "2s";
  elem.style.transitionProperty = "opacity, height";
}

function doJQuery() {
  const elem = $("#bj");
  elem.css({
    opacity: 0,
    height: 0,
    "transition-duration": "2s",
    "transition-property": "opacity, height",
  });
}
.block {
  width: 200px;
  font-size: 24px;
  font-family: Tahoma;
  display: inline-block;
  margin: 10px;
  border: 1px solid gray;
}

.initial {
  opacity: 1;
  height: 200px;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div>
  <button>start</button>
</div>

<div>
  <div class="block">
    <div id="bn" class="initial">This box is collapsed using the native transition API</div>
  </div>
  <div class="block">
    <div id="bj" class="initial">This box is collapsed using the jQuery transition API</div>
  </div>
</div>

LEGACY CONTENT (больше не актуально):

Вот лишь фрагмент кода для описания контекста: 

items.css({
  opacity: 0,
  height: 0,
  "transition-duration": transitionDuration + "ms",
  "transition-property": "opacity, height"
});

Чтобы лучше выяснить фактическое и ожидаемое поведение, взгляните на эту ручку: https://codepen.io/highfield/pen/dKLKKo

После запуска нажатием кнопки «скрыть» блок «Элементы» немедленно исчезает, но ожидаемое поведение должно исчезать в течение определенного интервала. После этого начального странного этапа функции «show» и «hide» ведут себя как положено.

Я также заметил, что при удалении «высоты» из поля CSS «свойства перехода» непрозрачность будет корректно исчезать.

Как исправить эту проблему?

Ответы [ 2 ]

0 голосов
/ 04 июля 2018

Наконец, я нашел, где проблема.

Кажется, что порядок полей имеет значение, но я не понимаю, почему собственная версия работает нормально, даже в случайном порядке. Изменяя версию jQuery следующим образом, переходы ведут себя правильно: 

function doJQuery() {
  const elem = $("#bj");
  elem.css({
    "transition-duration": "2s",
    "transition-property": "opacity, height",
    opacity: 0,
    height: 0,
  });
}
0 голосов
/ 04 июля 2018

Свойства перехода должны быть установлены для целевого элемента перед выполнением любых переходов. Чтобы эта начальная анимация тоже работала, вы должны установить базовое определение перехода для элемента #s1 в CSS.

...