Форум

notOldFagFromRussia · #1 (**permalink**) 15.11.2018, 22:59

Здравствуйте.

Есть картинка:

<img id="result_pic_six" src="img/hulk_main.jpg" width=100% alt="A">

Картинка появляется если набрать определенное кол-во очков.
Но проявление резкое и смотрится не очень.

Пробовал через opacity и transition но не работает.

Скорее всего из-за этого куска кода.

var hero_six = document.getElementById('result_pic_six');
hero_six.style.display="block";

Код:

#result_pic_six
    display: none

Как я это понимаю - из-за того что стоит display="block" - картинка появляется сразу же, без всяких задержек.

При этом удалить их нельзя, они необходимы, чтобы код работал.

Как решить проблему?

рони · #2 (**permalink**) 15.11.2018, 23:23

notOldFagFromRussia,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   #result_pic_six {
      display: none;
      opacity: 0;
      transition: 2s;
   }
  </style>
</head>

<body>
<img id="result_pic_six" src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width=100% alt="A">
 <script>

var hero_six = document.getElementById('result_pic_six');
hero_six.style.display="block";
window.setTimeout(function() {
hero_six.style.opacity="1";

},0)

 </script>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript