Анимация блоков текста и логотипа в качестве преладера - PullRequest
Новая
       34

Анимация блоков текста и логотипа в качестве преладера

0 голосов
/ 13 июня 2019

Хорошо, так как это мой первый вопрос, когда-либо задаваемый в стеке, надеюсь, что я буду ясен настолько, насколько я смогу:)

Итак, что я в основном хочу сделать, это анимировать некоторый текст и логотип в качестве предварительной загрузки.для веб-сайта.Использование только Vanilla JavaSccipt.

Что я хочу сделать, это выбрать каждый DOM, который имеет блок id + элемент {{}} и вызвать функцию, которая собирается удалить класс, и после этого добавить этот удаленный класс, снова вызывая ту же самую функцию, поэтому у меня исчезаетв затухающем тексте для каждого из "бокса".

Это моя структура HTML: 

   <section class="txt-wrapper">
            <div id="block1" class="block none">Hello</div>
            <div id="block2" class="block none">Im Maria</div>
            <div id="block3" class="block none">and this is mine</div>
            <div id="block4" class="none">
                <img src="logo.png" alt="WineLogo"></div>
            </div>
       </section>
       <script src="./js/main.js"></script>

И это JavaScript 

function ToggleVisibility(el,delay) {
    if (el.classList.contains('none')){
        el.classList.remove('none');
        el.classList.add('display');
        setTimeout(ToggleVisibility(el),delay);
    }
    else {
        el.classList.remove('display');
        el.classList.add('none');
    }
}
var element;
var delay = 2000;
for (var i = 1; i < 5; i++) {
    element = document.getElementById("block" + String(i));
    ToggleVisibility(element, delay*i);
}

обновление: css 

.none {
    opacity: 0;
}

.display{
    opacity: 1;
}

.an-wrapper {
    position: relative;
}

.txt-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .block {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width:100%;
        text-align: center;
        transition: ease all 1s;
    }
}

Я ожидаю, что дляФункция вызова цикла для каждого элемента и изменения класса ждут в течение 2 секунд, чем обратный процесс

...