Nie działa zmiana opacity, po dodaniu klasy w JS

Question

Witam.

Dlaczego nie działa stopniowe pojawianie się .balls? - chodzi o to by na początku miały opacity:0 i po dodaniu klasy w JS zmieniło się w takim tempie jak transition w css. Sorry za tak chaotyczny opis.

https://codepen.io/Ajzyn/pen/eeaKeQ

:)

Answer 1

Zamiast .balls użyj 

.balls:not(:empty) {
    opacity: 1;
}

 

Comments

Hmm.. ciekawie wygląda, ale nie do końca rozumiem jak działa. Wszystkie balls ktore nie są puste mają mieć opacity:1 tak? Mozesz opisać w jaki sposób to zadziała? I dlaczego zwyczajne dodanie nowe klasy z opacity nie działa?

---

Otwieramy dokumentację czytamy pierwsze zdanie:

"Transitions enable you to define the transition between two states of an element. "

Czytamy drugie zdanie:

"Different states may be defined using pseudo-classes"

W moim przykładzie używam not oraz empty. Co jak sama ich nazwa mówi, sprawdza nam czy elementy nie są pustę, Twoje elementy o classie "balls" posiadają w sumie tekst. A więc aplikuje opcity na 1, wraz z uruchomieniem transition w  ".balls".

---

Dzięki :)

Answer 2

Po prostu zrób animacje @keyframes dla tworzonego diva.

<button>Losuj</button>
<div class="all"></div>

 

html {
    font-family: arial;
    padding: 50px;
}

button {
    color: black;
    background: white;
    border: 3px black solid;
    padding: 10px 20px;
    margin: 30px auto 60px auto;
    font-size: 2rem;
    display: block;
    border-radius: 5px;
    transition: 250ms ease;
}

button:hover {
    cursor: pointer;
    background: black;
    color: white;
}

.balls {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: deepskyblue;
    color: white;
    font-size: 1.5rem;
    line-height: 80px;
    text-align: center;
    box-shadow: 0 0 15px -1px blue;
    float: left;
    margin-right: 50px;
    animation: opacity 1s ease;
}

@keyframes opacity{
0% {
opacity: 0;
}
25% {
opacity: .25;
}
50% {
opacity: .5;
}
100% {
opacity: 1;
}
}

var array = [];

var losowanie = function () {


    if (array.length === 6) return

    var losowana = Math.floor(Math.random() * 49 + 1);
    if (array.indexOf(losowana) !== -1) return losowanie()


    var div = document.createElement("div");
    var all = document.querySelector(".all");

    div.classList.add("balls");
    div.innerHTML = losowana;
    all.appendChild(div);

    array.push(losowana);

    setTimeout(losowanie, 450);

};


var button = document.querySelector('button');

button.addEventListener("click", losowanie);