JavaScript заставляет CSS переход не работать - PullRequest
Новая
       5

JavaScript заставляет CSS переход не работать

1 голос
/ 04 октября 2019

Я пытаюсь загрузить стиль из файла css и меню из файла js.

В файле js я использую «document.write», и это приводит к тому, что переход css не работает.

HTML: 

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <script type="text/javascript" src="menu.js"></script>
        <div class="trans">aaa</div>
    </body>
</html>

CSS (имя файла: style.css) 

.trans {
    text-align: center;
    padding-top: 250px;
    transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
}

JavaScript (имя файла: menu.js) 

str = `
<div>menu</div>
`;
document.write(str);

обновление - решение:

Спасибо всем респондентам! Благодаря вам я получил решение: -)

добавление асинхронное , чтобы скрипт не блокировал анимацию: 

<script async type="text/javascript" src="menu.js"></script>

замена 

document.write(str);

с 

document.currentScript.insertAdjacentHTML("beforebegin", str);

, чтобы документ не был переписан.

Ответы [ 3 ]

0 голосов
/ 04 октября 2019

На самом деле ваш код в порядке, но чего-то не хватает. Ваш переход не работает, потому что вы не указали переход.

Вы должны сделать trans: hover, trans: clicked или любое другое состояние, которое вам нужно, с атрибутом css, например background-color: red;Затем, когда вы наведите курсор мыши, щелкнете или что-то еще, вы увидите, что ваш переход работает нормально. Однако ваш document.write - плохая практика. Это может испортить вещи.

Попробуйте:

HTML 

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="menu.js"></script>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="trans">aaa</div>
        <div id="abc"></div>
    </body>
</html>

CSS 

.trans {
    text-align: center;
    padding-top: 250px;
    transition: 1s;
    -moz-transition: 5s;
    -ms-transition: 5s;
    -o-transition: 5s;
    -webkit-transition: 5s;
}    

.trans:hover {
  background-color: red;
}

Скрипты 

document.getElementById("abc").innerHTML = "menu";

Попробуйте: https://jsfiddle.net/jlanssie/Ljhawtqx/5/

0 голосов
/ 04 октября 2019

document.write(str) перезапишет тур документ, поэтому <div class="abc">menu</div> заменит замену <div class="trans"></div>, и это приведет к тому, что ваш весь CSS не будет работать, не только переходы ,Вместо этого используйте innerHTML. 

let container = document.querySelector('.trans');
let str = `
<div class="abc">menu</div>
`;
container.innerHTML = str;
.trans {
    text-align: center;
    padding-top: 250px;
    transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    -webkit-transition: all 1s ease;
}


.trans:hover {
  background-color: #c00;
  color: white;
}
<div class="trans"></div>

Для переходов синтаксис: 

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

Также помните, что не все свойства CSS поддерживают переходы.

0 голосов
/ 04 октября 2019

Попробуйте это для своего JavaScript (при условии, что вы хотите этот div в конце тела): 

var myDiv = document.createElement("div");
myDiv.className = "abc";
var textNode = document.createTextNode("menu");
myDiv.appendChild(textNode);
document.body.appendChild(myDiv);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...