Динамическая загрузка файла CSS, который использует свойство `transition`, задерживается - PullRequest
Новая
       10

Динамическая загрузка файла CSS, который использует свойство `transition`, задерживается

0 голосов
/ 04 сентября 2018

Я загружаю внешний CSS-файл, используя JS. Для моих переключателей я запускаю анимацию transition, но ее загрузка задерживается при загрузке страницы, и я не могу понять, почему.

Примечание. Поскольку эта проблема возникает только при загрузке страницы, наиболее эффективным способом воспроизведения может быть копирование файлов html и css и их локальный запуск. Простой запуск фрагмента кода не покажет проблему. Вы должны заметить, что мужчина и женщина div оживляются в форме, а не появляются сразу после загрузки страницы.

Чтобы увидеть желаемое поведение, импортируйте CSS прямо в head html-файла (а не импортируйте с помощью JS). Вы заметите, что пол div появляется мгновенно, без анимации.

Вот гиф того, что он сейчас делает, чего я не хочу: https://media.giphy.com/media/8BksF1okeQfNyv7ZCh/giphy.gif 

const genderCss = document.createElement('link')
genderCss.rel = "stylesheet"
genderCss.href = "demo.css"
genderCss.type = "text/css"
document.head.appendChild(genderCss)
*,
*:before,
*:after {
  box-sizing: border-box;
}

.col-half {
  padding-right: 0;
  float: left;
  width: 100%;
}
.col-half:last-of-type {
  padding-right: 0;
}

.registrationContainer {
  justify-content: center;
  align-items: center;
  margin: 10rem auto;
  background: white;
  padding: 20px 25px;
  border: 5px solid #337ab7;
  border-radius: 6px;
  width: 550px;
  height: auto;
  box-sizing: border-box;
}

.gender-input-group {
  margin-bottom: 1em;
  padding: 0;
  zoom: 1;
  width: 100%;
}

.gender-input-group:before,
.gender-input-group:after {
  content: "";
  display: table;
}

.gender-input-group:after {
  clear: both;
}

input[type="radio"] + label,
select option,
select {
  width: 30%;
  text-align: center;
  padding: 1em;
  line-height: 1.4;
  background-color: #f9f9f9;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  /* The problem seems to be here */
  -webkit-transition: 0.35s ease-in-out;
  -moz-transition: 0.35s ease-in-out;
  -o-transition: 0.35s ease-in-out;
  transition: 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

input[type="radio"]:checked + label,
input:checked + label:before,
select:focus,
select:active {
  background-color: #7ed321;
  color: #fff;
  border-color: #64ac15;
}

select {
  display: inline-block;
  width: 50%;
  text-align: center;
  float: left;
  border-radius: 0;
}
input[type="radio"] + label:first-of-type {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

input[type="radio"] {
  display: none;
  box-sizing: border-box;
  padding: 0;
}

input[type="checkbox"] + label:before {
  position: absolute;
  top: 0.2em;
  left: 0;
  display: block;
  width: 1em;
  height: 1em;
  padding: 0;
  content: "";
}
input[type="checkbox"] + label:after {
  position: absolute;
  top: 0.45em;
  left: 0.2em;
  font-size: 0.8em;
  color: #fff;
  opacity: 0;
  font-family: FontAwesome;
  content: "\f00c";
}
<!DOCTYPE html>
<html>
<head>
  <link
    rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous"
  >

  <script
    src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous">
  </script>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
    integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous">
  </script>
  <script
    src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous">
  </script>
  <script type="text/javascript">
    const css = document.createElement('link')
    css.rel = "stylesheet"
    css.href = "demo.css"
    css.type = "text/css"
    document.head.appendChild(css)
  </script>
</head>
<body>
  <div class="col-half">
    <h5>Gender</h5>
    <div class="gender-input-group">
      <input
        id="male"
        type="radio"
        name="gender"
        value="male"
      >
      <label for="male">Male</label>
      <input
        id="female"
        type="radio"
        name="gender"
        value="female"
      >
      <label for="female">Female</label>
    </div>
  </div>
</body>
</html>
...