Question

我正在使用JS加载外部CSS文件。对于我的单选按钮，我正在运行一个transition动画，但是它的加载在页面加载时被延迟了，我不知道为什么。

注意：由于此问题仅在页面加载时发生，因此最有效的重现方法可能是复制html＆css文件，然后在本地运行。简单地运行代码片段不会显示问题。您应该注意，div的男性和女性会动起来，而不是在页面加载后立即显示。

要查看所需的行为，请将CSS直接导入html文件的head中（而不是使用JS导入）。您会注意到，性别div会立即显示，没有动画。

以下是我不想要的当前操作的gif图像：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>

动态加载利用`transition`属性的CSS文件会延迟

0 个答案: