• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

0 głosów
129 wizyt
pytanie zadane 6 dni temu w JavaScript, jQuery, AJAX przez ajzyn Początkujący (320 p.)
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

:)

2 odpowiedzi

+1 głos
odpowiedź 6 dni temu przez Fenix Nałogowiec (26,210 p.)

Zamiast .balls użyj 

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

 

komentarz 5 dni temu przez ajzyn Początkujący (320 p.)
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?
komentarz 5 dni temu przez Fenix Nałogowiec (26,210 p.)
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".
komentarz 4 dni temu przez ajzyn Początkujący (320 p.)
Dzięki :)
+1 głos
odpowiedź 5 dni temu przez pablop76 Nałogowiec (27,280 p.)
edycja 5 dni temu przez pablop76

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);

 

Podobne pytania

0 głosów
1 odpowiedź 73 wizyt
pytanie zadane 4 grudnia 2016 w JavaScript, jQuery, AJAX przez Wilier Bywalec (2,460 p.)
0 głosów
2 odpowiedzi 59 wizyt
pytanie zadane 14 lipca w HTML i CSS przez wariacik Początkujący (300 p.)
0 głosów
1 odpowiedź 63 wizyt
pytanie zadane 9 lutego 2016 w HTML i CSS przez Cygan Nowicjusz (120 p.)

42,445 zapytań

81,749 odpowiedzi

162,269 komentarzy

20,388 pasjonatów

Przeglądających: 103
Pasjonatów: 2 Gości: 101

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...