• 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
137 wizyt
pytanie zadane 7 grudnia 2017 w JavaScript, jQuery, AJAX przez ajzyn Początkujący (440 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 (440 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 (440 p.)
Dzięki :)
+1 głos
odpowiedź 7 grudnia 2017 przez pablop76 Nałogowiec (48,240 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
1 odpowiedź 49 wizyt
pytanie zadane 31 marca w HTML i CSS przez Leho99 Nowicjusz (200 p.)
0 głosów
1 odpowiedź 60 wizyt
pytanie zadane 1 marca w HTML i CSS przez Konrad Kołak Obywatel (1,080 p.)
Oferty pracy dla początkujących programistów na portalu No Fluff Jobs
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.Podgląd posta

49,734 zapytań

91,688 odpowiedzi

185,189 komentarzy

24,196 pasjonatów

Przeglądających: 276
Pasjonatów: 11 Gości: 265

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.

...