• 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
136 wizyt
pytanie zadane 7 grudnia 2017 w JavaScript, jQuery, AJAX przez ajzyn Początkujący (340 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ź 7 grudnia 2017 przez Fenix Nałogowiec (26,990 p.)

Zamiast .balls użyj 

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

 

komentarz 7 grudnia 2017 przez ajzyn Początkujący (340 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 8 grudnia 2017 przez Fenix Nałogowiec (26,990 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 8 grudnia 2017 przez ajzyn Początkujący (340 p.)
Dzięki :)
+1 głos
odpowiedź 7 grudnia 2017 przez pablop76 Nałogowiec (35,640 p.)
edycja 7 grudnia 2017 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ź 74 wizyt
pytanie zadane 4 grudnia 2016 w JavaScript, jQuery, AJAX przez Wilier Bywalec (2,580 p.)
0 głosów
3 odpowiedzi 102 wizyt
pytanie zadane 2 stycznia w HTML i CSS przez Mikołaj Początkujący (370 p.)
0 głosów
2 odpowiedzi 63 wizyt
pytanie zadane 14 lipca 2017 w HTML i CSS przez wariacik Początkujący (300 p.)
Porady nie od parady
Zadając pytanie postaraj się o odpowiedni tytuł, kategorię oraz tagi.
Ciekawy innych porad? Odwiedź tę stronę!

45,516 zapytań

85,820 odpowiedzi

171,213 komentarzy

22,082 pasjonatów

Przeglądających: 135
Pasjonatów: 6 Gości: 129

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.

...