Форум

Ш.Азиз · #1 (**permalink**) 31.05.2018, 12:43

Здравствуйте, Я хочу, чтоб когда пользователь кликал на кнопку, запускалась анимация загрузки. Вроде все правильно сделал. Но что-то не работает. Без js и onlick анимация норм работает. Вот сам код:

JS -

var s = docomument.getElementById('az');
s.style.animation = 'as 5.75s steps(40) 1';

HTML -

<div id="az">
</div>

CSS -

#az {
position: absolute;
height: 100%;
width: 100%;
background-color: black;
animation:as;

@keyframes as {
0% {
left: -100%;
}

100% {
left: 0px;
}
}

Помогите пожалуйста

Ш.Азиз · #2 (**permalink**) 31.05.2018, 12:44

И ещё, если поменять менять строки кодов в этом скрипте, то результат тоже меняется. Может с этим как-то связано
JS -

var l = document.getElementById('txttt');
l.style.display = 'block';
var elem = document.getElementById('azai');
elem.style.display = 'none'
var z = document.getElementById('h');
z.style.display = 'block';
var s = docomument.getElementById('az');
s.style.animation = 'as 5.75s steps(40) 1';

рони · #3 (**permalink**) 31.05.2018, 14:09

Сообщение от Ш.Азиз

var s = docomument.getElementById('az');

рони · #4 (**permalink**) 31.05.2018, 14:17

Ш.Азиз,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #az {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: black;
  left: -100%;
  }
  #az.anim{
    animation:as 5.75s steps(40) 1 forwards;
  }

  @keyframes as {
  0% {
  left: -100%;
  }

  100% {
  left: 0px;
  }
  }

  </style>
  <script>
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('.btn').addEventListener('click',
    function() {
    document.querySelector('#az').classList.add("anim");
    })
  });
  </script>
</head>
<body>
  <button class="btn">btn</button>
  <div id="az"></div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript