Удаление класса, затем добавление его обратно приводит к другому отображению - PullRequest
Новая
       0

Удаление класса, затем добавление его обратно приводит к другому отображению

3 голосов
/ 31 марта 2020

У меня есть определенный стиль css, называемый "line". При нажатии кнопки (кнопка PLAY) я удаляю этот класс из своего элемента "song_info", затем добавляю новый класс с именем "standard" Еще одним нажатием кнопки (кнопка ПАУЗА) я удаляю класс «стандарт», затем снова добавляю класс «линия». 

function play_button() {
  document.getElementById('song_info').classList.remove("line");
  document.getElementById('song_info').classList.add("standard");
}

function pause_button() {
  document.getElementById('song_info').classList.remove("standard");
  document.getElementById('song_info').classList.add("line");
}


window.onload = function() {
  document.getElementById("play_button").onclick = play_button;
  document.getElementById("pause_button").onclick = pause_button;
}
.css3gradient {
  width: 298px;
  height: 180px;
}

body {
  margin: 10px;
  white-space: nowrap;
}

#play_button {
  top: 65%;
  left: 113px;
  position: absolute;
  transform: translate(-50%, -50%);
}

#pause_button {
  top: 65%;
  left: 191px;
  position: absolute;
  transform: translate(-50%, -50%);
}

#songContainer {
  width: 198px;
  height: 50px;
  position: absolute;
  overflow: hidden;
  padding: 0;
  margin: 0;
  top: 50px;
  left: 60px;
  z-index: -2;
}

#albumContainer {
  width: 198px;
  height: 50px;
  position: absolute;
  overflow: hidden;
  padding: 0;
  top: 72px;
  left: 60px;
  /*z-index: -1;*/
}

#songWrapper {
  position: absolute;
  overflow: hidden;
  width: auto;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -2;
}

#albumWrapper {
  position: absolute;
  overflow: hidden;
  width: auto;
  height: 100%;
  top: 0;
  left: 0;
  /*z-index: -1;*/
}

#songWrapper span.line {
  position: absolute;
  overflow: hidden;
  position: relative;
  /*margin: 15px;*/
  width: auto;
  top: 35%;
  left: 50%;
  animation: marquee 10s linear infinite;
  z-index: -2;
}

#albumWrapper span.line {
  position: absolute;
  overflow: hidden;
  position: relative;
  width: auto;
  top: 50%;
  left: 50%;
  animation: marquee 10s linear infinite;
  z-index: -1;
}

#songWrapper span.standard {
  margin: 15px;
  visibility: visible;
  display: block;
  position: relative;
  width: 149px;
  height: 45px;
  top: 50%;
  left: 50%;
  z-index: -1;
  /*
  margin-top: 11px;
  width: 200px;
  visibility: visible;
  position: absolute;
  top: 20px;
  left 20px;
  */
  transform: translate(-50%, -50%);
}

#albumWrapper span.standard {
  margin: 15px;
  visibility: visible;
  display: block;
  position: relative;
  width: 149px;
  height: 45px;
  top: 50%;
  left: 50%;
  z-index: -1;
  /*
  margin-top: 11px;
  width: 200px;
  visibility: visible;
  position: absolute;
  top: 20px;
  left 20px;
  */
  transform: translate(-50%, -50%);
}

@keyframes marquee {
  0% {
    left: -17%;
  }
  100% {
    left: -50.4%;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="css3gradient">
  <div class="idiv">
    <div id="songContainer" class="marqueeContainer">
      <div id="songWrapper" class="loaded">
        <span id="song_info" class="line shadowedObj">No Song Is Currently Playing!!!&nbsp;&nbsp;&nbsp;No Song Is Currently Playing!!!&nbsp;&nbsp;&nbsp;No Song Is Currently Playing!!!</span>
      </div>
    </div>
    <div id="albumContainer" class="marqueeContainer">
      <div id="albumWrapper" class="loaded">
        <span id="album_info" class="line shadowedObj">Album is longer and long enough&nbsp;&nbsp;&nbsp;Album is longer and long enough&nbsp;&nbsp;&nbsp;Album is longer and long enough</span>
      </div>
    </div>
  </div>
  <div class="idiv">
    <button class="button" id="play_button">PLAY</button>
    <button class="button" id="pause_button">PAUSE</button>
  </div>
</div>

Ожидаемое поведение - стиль css вернется в нормальное состояние. Однако это не так, и позиция поднялась довольно значительно. Разве мы не всегда ожидаем, что стиль будет таким же, когда данный класс удаляется, а затем снова добавляется? Что именно происходит, что у него другой стиль? Что можно сделать для достижения желаемого эффекта и возврата css изменений путем добавления и удаления класса?

Пример можно найти здесь: JSFiddle

1 Ответ

1 голос
/ 31 марта 2020

Я думаю, вы нашли ошибку в Blink , которую он унаследовал от WebCore в WebKit (Blink начался как форк WebCore). Вероятно, стоит сообщить об этом в проект WebKit и, возможно, также в проект Chromium, частью которого является Blink.

Я основываю эту оценку на:

  • Те же классы действительно должны привести к тот же дисплей.
  • Проблема возникает в браузерах, таких как Brave, Chrome, Chrome на основе Edge и Safari (WebKit), и не возникает на Firefox (который использует Gecko) или Legacy Edge ( который использует Edge HTML)

Вот обходной путь, созданный Anakin , см. комментарии в коде: 

function play_button() {
  document.getElementById('song_info').classList.remove("line");
  document.getElementById('song_info').classList.add("standard");
}

function pause_button() {
  document.getElementById('song_info').classList.remove("standard");
  document.getElementById('song_info').classList.add("line");
}


window.onload = function() {
  document.getElementById("play_button").onclick = play_button;
  document.getElementById("pause_button").onclick = pause_button;
}
.css3gradient {
  width: 298px;
  height: 180px;
}

body {
  margin: 10px;
  white-space: nowrap;
}

#play_button {
  top: 65%;
  left: 113px;
  position: absolute;
  transform: translate(-50%, -50%);
}

#pause_button {
  top: 65%;
  left: 191px;
  position: absolute;
  transform: translate(-50%, -50%);
}

#albumContainer {
  width: 198px;
  height: 50px;
  position: absolute;
  overflow: hidden;
  padding: 0;
  top: 72px;
  left: 60px;
  //z-index: -1;
}

#songWrapper {
  position: absolute;
  overflow: hidden;
  width: auto;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -2;
}

#albumWrapper {
  position: absolute;
  overflow: hidden;
  width: auto;
  height: 100%;
  top: 0;
  left: 0;
}

#albumWrapper span.line {
  overflow: hidden;
  position: relative;
  width: auto;
  top: 50%;
  left: 50%;
  animation: marquee 10s linear infinite;
  z-index: -1;
}

#albumWrapper span.standard {
  margin: 15px;
  visibility: visible;
  display: block;
  position: relative;
  width: 149px;
  height: 45px;
  top: 50%;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
}

@keyframes marquee {
  0% {
    left: -17%;
  }
  100% {
    left: -50.4%;
  }
}

#songWrapper span.line {
  /* removed top and right property */
  position: relative;
  width: auto;
  overflow: hidden;
  animation: marquee 10s linear infinite;
  z-index: -2;
}

#songWrapper span.standard {
  /* there is no need to change into a block element
     so, what's really important in this class is removing the animation */
  animation: none;
}

#songContainer {
  /* now we move this element down to make it near with #albumContainer */
  position: absolute;
  overflow: hidden;
  width: 198px;
  height: 30px;
  /* decrease the height */
  padding: 0;
  margin: 0;
  top: 72px;
  /* move this down a little more */
  left: 60px;
  z-index: -2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="css3gradient">
  <div class="idiv">
    <div id="songContainer" class="marqueeContainer">
      <div id="songWrapper" class="loaded">
        <span id="song_info" class="line shadowedObj">No Song Is Currently Playing!!!&nbsp;&nbsp;&nbsp;No Song Is Currently Playing!!!&nbsp;&nbsp;&nbsp;No Song Is Currently Playing!!!</span>
      </div>
    </div>
    <div id="albumContainer" class="marqueeContainer">
      <div id="albumWrapper" class="loaded">
        <span id="album_info" class="line shadowedObj">Album is longer and long enough&nbsp;&nbsp;&nbsp;Album is longer and long enough&nbsp;&nbsp;&nbsp;Album is longer and long enough</span>
      </div>
    </div>
  </div>
  <div class="idiv">
    <button class="button" id="play_button">PLAY</button>
    <button class="button" id="pause_button">PAUSE</button>
  </div>
</div>

Использует div class="css3gradient" в качестве самого внешнего элемента (потому что сам фрагмент предоставляет body), но он прекрасно работает, когда вы ' вместо этого используется body class="css3gradient" в качестве внешнего.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...