Эффект затухания не работает с использованием Wow-анимации? - PullRequest
Новая
       5

Эффект затухания не работает с использованием Wow-анимации?

0 голосов
/ 03 марта 2020

Я пытаюсь сделать эффект fadeOut на клике, но это не работает должным образом. Я должен использовать только CSS, а не javascript или jquery.

Мой код: - 

$(function() {
    new WOW().init();
});
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.fadeOut1 {
    animation-name: fadeOut;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js" integrity="sha256-z6FznuNG1jo9PP3/jBjL6P3tvLMtSwiVAowZPOgo56U=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" integrity="sha256-PHcOkPmOshsMBC+vtJdVr5Mwb7r0LkSVJPlPrp/IMpU=" crossorigin="anonymous" />


<img src="https://www.freepnglogos.com/uploads/google-logo-png-hd-11.png" width="200p/x" class="wow fadeOut">

Я использую wow animation.

Проблема в том, что если я хочу fadeOut, то почему это отображается после fadOut влияние на нагрузку?

1 Ответ

1 голос
/ 03 марта 2020

Вы можете добавить свойство animation-fill-mode: forwards к классу fadeOut, чтобы анимация оставалась на последнем ключевом кадре после его окончания. 

$(function() {
    new WOW().init();
});
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.fadeOut {
    animation-name: fadeOut;
    animation-fill-mode: forwards;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js" integrity="sha256-z6FznuNG1jo9PP3/jBjL6P3tvLMtSwiVAowZPOgo56U=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" integrity="sha256-PHcOkPmOshsMBC+vtJdVr5Mwb7r0LkSVJPlPrp/IMpU=" crossorigin="anonymous" />


<img src="https://www.freepnglogos.com/uploads/google-logo-png-hd-11.png" width="200p/x" class="wow fadeOut">
...