как анимировать свойство отображения в CSS или альтернативе, без использования JavaScript - PullRequest
Новая
       11

как анимировать свойство отображения в CSS или альтернативе, без использования JavaScript

0 голосов
/ 24 марта 2019

, поэтому я делаю рекламу, которая имеет анимацию, используя только CSS (это требование для проекта).Проблема в том, что я не могу удалить элементы с экрана, потому что свойство display не анимируемое.Я хочу удалить элементы с экрана, потому что необходимо полное изменение сцены 2 раза, следовательно, будет 3 сцены.Старые элементы должны исчезнуть, а новые элементы должны быть показаны за доли секунды.

Я достиг следующего состояния без использования JavaScript, но я не знаю, как заставить 2 изображения исчезнуть и освободить место.для следующих элементов текстовых элементов.

https://jsfiddle.net/br93px4z/1/

изменения заключаются в том, что javascript был полностью удален и отредактирован следующий CSS: 

@keyframes scale{
    0%{transform: scale(0.2);}
    99.9%{transform: scale(2.3);left:280px;top:40px;}
    100%{transform: scale(0.0000001);left: -4000px;top: -4000px;}
}


@keyframes topToBottom{
    0%{transform: translateY(-100px);}
    80%{transform: translateX(700px) translateY(100px) scale(2);left: -248px;
    top: -62px;}
    99%{transform: translateX(700px) translateY(100px) scale(2);left: -248px;
    top: -62px;}
    100%{transform: scale(0.0000001);left: -4000px;top: -4000px;}

}

здесьчто я хочу достичь, но это достигается с помощью JavaScript: https://jsfiddle.net/t6ackzeb/4/

важный используемый JavaScript (только для чтения): 

logo.addEventListener("webkitAnimationEnd", postAnimation1);

    logo.addEventListener("animationend", postAnimation1);


    function postAnimation1() {
        logo.style.display = "none";
        part1.style.backgroundColor = "#d6a333";
        part1.style.backgroundImage = "none";
        txtAdventure.style.display="block";
    }

    txtAdventure.addEventListener("animationend", postAnimation2);

    function postAnimation2() {
        img1.style.display = "none";
        img2.style.display = "none";
        txtAdventure.style.display="none";
        part1.style.backgroundImage="url('https://i.imgur.com/KsS80IE.png')"
        txt1.style.display = "block";
        txt2.style.display = "block";
        txt3.style.display = "block";
        endLogo.style.display = "block";

    }

````````````````````````

So is there an an alternative to achieving the same results as display:none; but without using javascript ?

thank you

Found the solution thanks to https://stackoverflow.com/users/9166287/adnan-toky :
here:
https://jsfiddle.net/mnpsavkq/16/

1 Ответ

0 голосов
/ 24 марта 2019

Попробуйте следующий пример кода.

CSS: 

.animatedDiv {
    height:100px;
    width:100px;
    float: left;
    margin:5px;
 }

.d1 {
    animation:hide1 10s linear 10;
    background:red;
}

.d2 {
    animation:hide2 10s linear 10;
    background:green;
}

.d3 {
    animation:hide3 10s linear 10;
    background:blue;
}

@keyframes hide1{
    0% {
        opacity:1;
        height:100px;
        width:100px;
    }
    33% {
        opacity:0;
        height: 100px;
        width:100px;
    }
    34% {
        width: 0;
        height: 0;
    }
    100% {
        opacity:0;
        height:0;
        width:0;
    }
}

@keyframes hide2{
    0% {
        opacity:1;
        height:100px;
        width:100px;
    }
    33% {
        opacity:1;
    }
    66% {
        opacity:0;
        height: 100px;
        width:100px;
    }
    67% {
        width: 0;
        height: 0;
    }
    100% {
        opacity:0;
        height:0;
        width:0;
    }
}

@keyframes hide3{
    0% {
        opacity:1;
        height:100px;
        width:100px;
    }
    66% {
        opacity:1;
    }
    99% {
        opacity:0;
        height: 100px;
        width:100px;
    }
    100% {
        width: 0;
        height: 0;
    }
}

HTML: 

<div class="animatedDiv d1"></div>
<div class="animatedDiv d2"></div>
<div class="animatedDiv d3"></div>
...