• 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,930 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,930 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 (36,100 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,560 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
Komentarze do pytań nie służą do odpowiadania, od tego jest wydzielona sekcja odpowiedzi. Funkcją komentarzy jest natomiast możliwość uzyskania dodatkowych informacji na temat samego posta.
Ciekawy innych porad? Odwiedź tę stronę!

45,699 zapytań

86,090 odpowiedzi

171,931 komentarzy

22,166 pasjonatów

Przeglądających: 178
Pasjonatów: 11 Gości: 167

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.

...