• 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
142 wizyt
pytanie zadane 7 grudnia 2017 w JavaScript, jQuery, AJAX przez ajzyn Początkujący (460 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,950 p.)

Zamiast .balls użyj 

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

 

komentarz 7 grudnia 2017 przez ajzyn Początkujący (460 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,950 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 (460 p.)
Dzięki :)
+1 głos
odpowiedź 7 grudnia 2017 przez pablop76 Maniak (67,680 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ź 81 wizyt
pytanie zadane 4 grudnia 2016 w JavaScript, jQuery, AJAX przez Wilier Bywalec (2,600 p.)
0 głosów
1 odpowiedź 71 wizyt
pytanie zadane 31 marca w HTML i CSS przez Leho99 Nowicjusz (200 p.)
0 głosów
1 odpowiedź 63 wizyt
pytanie zadane 1 marca w HTML i CSS przez Konrad Kołak Obywatel (1,100 p.)
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

54,420 zapytań

98,307 odpowiedzi

202,202 komentarzy

26,728 pasjonatów

Przeglądających: 292
Pasjonatów: 13 Gości: 279

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.

...