Итак, я нашел это решение Using CSS for fade-in effect on page load И я использовал метод 2 с необработанным JavaScript. Вот мой пример кодаЗатухание при нагрузке не работает

JavaScript

var fadeOnLoad = function() { 
    document.getElementById("wrapper").className += "load"; 
}; 
fadeOnLoad();

CSS

#wrapper { 
    opacity: 0; 
    transition: opacity 2s ease-in; 
} 

.load { 
    opacity: 1; 
}

Ссылка на сайт, где он не работает https://skidle.github.io/projects/weather

И этот текст зачеркнуто Инструменты Google Dev

источник

2017-02-09 Daria Doronina

'Непрозрачность: 1 важно,'? id имеет более высокий приоритет, чем класс – Banzay

попытки определить

opacity: 1 !important;

селектора имеет более высокий приоритет, чем класс

Вот отрывок с ясной логикой процесса. Элемент невидим, пока тело не загрузится. Как только тело событие OnLoad уволят, элемент получает opacity: 1;

function fadeOnLoad() { 
 
    document.getElementById("wrapper").className = ""; 
 
};

#wrapper { 
 
    transition: opacity 2s ease-in; 
 
} 
 

 
.not_loaded { 
 
    opacity: 0; 
 
}

<body onload="fadeOnLoad()"> 
 
<div id="wrapper" class="not_loaded">text</div> 
 
</body>

источник

2017-02-09 12:46:12 Banzay

, или уточните свой селектор: '# wrapper.load {opacity: 1;}' – scraaappy

Добавьте значение к вашему атрибуту класса.

.load{ 
     opcacity: 1 !important; //because you have id selector with opacity to 0. 
     }

источник

2017-02-09 12:41:59

Как хорошая практика, стараются избегать использования идентификаторов для укладки.

Вместо определения перехода в селекторе #wrapper, создать класс, содержащий transition свойство, как так:

.opacity-transition { 
    transition: opacity 2s ease-in; 
}

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

Создайте еще один класс, чтобы изначально скрыть элемент #wrapper. Когда этот класс будет удален, он вызовет переход.

.hidden { 
    opacity: 0; 
}

Код сниппета:

function fadeOnLoad() { 
 
    //Cache the selector. 
 
    var wrapper = document.getElementById("wrapper"); 
 
    console.log(wrapper.className); 
 
    //Add event listener for transition end. 
 
    wrapper.addEventListener("transitionend", function() { 
 
    //Remove the class which is not needed anymore. 
 
    this.classList.remove("opacity-transition"); 
 
    console.log(this.className); 
 
    }); 
 
    //Remove hidden class to start the transition. 
 
    wrapper.classList.remove("hidden"); 
 

 
};

.opacity-transition { 
 
    transition: opacity 2s ease-in; 
 
} 
 
.hidden { 
 
    opacity: 0; 
 
}

<body onload="fadeOnLoad()"> 
 
    <div id="wrapper" class="opacity-transition hidden"> 
 
    text</div> 
 
</body>

JSFIDDLE

источник

2017-02-09 14:07:21 Ricky

Затухание при нагрузке не работает

ответ

JSFIDDLE

Смежные вопросы