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

Kod CSS dla hover wykonywany przez javascript

Object Storage Arubacloud
0 głosów
595 wizyt
pytanie zadane 6 stycznia 2019 w JavaScript przez kralcz88 Obywatel (1,810 p.)

Witam!

Mam problem z wykonaniem fragmentu kodu CSS dla hover poprzez JS.

Chciałbym, żeby transform: rotate (zaznaczyłem na zielono w kodzie) dla psedoelementu ::after i ::before wykonywane były przez kliknięciu w inny element zamiast podczas hover. 

Kod CSS działa bez zarzutów - podczas hover pseudoelementy obracją się i pokazana jest druga strona elementu flip-card. W JS niestety zastosowanie rotate nie daje takiego samego efektu.

 

.flip-card {
    width: 550px;
    height: 400px;
    border-radius: 6px;
    margin: 20% auto;
    position: relative;
    -webkit-perspective: 800px;
    perspective: 800px;
}

.flip-card::before,
.flip-card::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: transparent;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 3px solid #171212;
    -webkit-transition: .6s transform linear;
    transition: .6s transform linear;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card::after {
    background-image: url("../img/dominar-red.jpg");
    background-size: cover;
    -webkit-filter: brightness(40%);
    filter: brightness(40%);
    z-index: -1;
}

.flip-card:hover::after {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip-card:hover .modelName p {
    display: none;
}

.flip-card::before {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip-card:hover::before {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    z-index: 100;
}

Kod JS:

let modelName = document.querySelector(".middle");
let flipCardAfter = document.querySelector(".flip-card", ":after");
let flipCardBefore = document.querySelector(".flip-card", ":before");

modelName.addEventListener("click", function () {

    flipCardAfter.style.webkitTransform = "rotateY(180deg)";
    flipCardBefore.style.webkitTransform = "rotate(360deg)";

});

 

komentarz 6 stycznia 2019 przez rafal.budzis Szeryf (85,260 p.)
W JS łatwiej dodawać i usuwać klasy znaczników DIV a dodawane i usuwane klasy stylować w CSS

2 odpowiedzi

+1 głos
odpowiedź 6 stycznia 2019 przez Tomek Sochacki Ekspert (227,510 p.)

querySelector pobiera listę selektorów, więc u Ciebie próbuje znaleźć element o selektorze ":after", a taki nie istnieje. Nie mam zbytnio czasu na dokładną analizę kodu i jakiegoś PoC'a, ale na myśl przychodzi mi użycie metody

window.getComputedStyle(selector, ':after')

i operowanie na tym obiekcie, ustawianie styli. Metoda ta zwraca style tzw. obliczone, czyli te, które w danej chwili posiada element.

Poczytaj o tej metodzie, może to da radę rozwiązać problem.

komentarz 7 stycznia 2019 przez kralcz88 Obywatel (1,810 p.)
Pseudo-element jest poprawnie wybrany, bo de facto rotate działa tylko jest on obracany o 360 stopni więc efekt wraca do tego samego położenia co początkowo. Można ustawić rotate na niższą wartość np 280 stopni i wtedy widać, że kod działa.

Problem w tym, że zastosowanie tych samych właściwości transfrom: rotate w CSS daje zupełnie inny efekt - karta obraca się tyl do przodu czyli zgodnie z założeniem.

Docelowo chciałbym z CSS usunąć hover dla pseudoelementów i zastąpić je zdarzeniem click na innym elemencie.
0 głosów
odpowiedź 6 stycznia 2019 przez bergman Obywatel (1,600 p.)
jak nie miałes w kodzie zadnych obrazków to mogłes wrzucić tez kod html moglibyśmy to zobaczyć w codeopenie dzieki nowej funkcji forum. Co do pytania nie rozumiem niestety podanego problemu "W JS niestety zastosowanie rotate nie daje takiego samego efektu."To jaki daje efekt czy nic sie nie zmienia?
komentarz 6 stycznia 2019 przez bergman Obywatel (1,600 p.)
czemu dałeś zmienne let a nie var nie masz pętli tam
komentarz 6 stycznia 2019 przez Tomek Sochacki Ekspert (227,510 p.)

czemu dałeś zmienne let a nie var nie masz pętli tam

Ty tak na serio pytasz...? Od kiedy to pętla oznacza LET, a nie pętla VAR :) ?

komentarz 6 stycznia 2019 przez Tomek Sochacki Ekspert (227,510 p.)
a tak w ogóle to jeśli już w ten temat wchodzisz to w sumie najlepsze byłoby const.
komentarz 6 stycznia 2019 przez kralcz88 Obywatel (1,810 p.)

@bergman,

Dosyłam fragment kody HTML którego sprawa dotyczy.

W javascript nie udaje się uzyskać efektu odwrócenia karty jak w CSS.

        <div class="flip-card">
            <div class="modelName">
                <p>Dominar D400 <span id="euro4">Euro4</span></p>
            </div>
            <div class="description">
                <ul id="specification">
                    <li><img src="assets/img/capacity.png" alt=""><span class="specs-bold">Capacity:</span> 373.3 cm3</li>
                    <li><img src="assets/img/power.png" alt=""><span class="specs-bold">Power:</span> 35HP @ 8000 rpm</li>
                    <li><img src="assets/img/torque.png" alt=""><span class="specs-bold">Torque:</span> 35Nm @ 6500 rpm</li>
                    <li><img src="assets/img/engine.png" alt=""><span class="specs-bold">Engine:</span> 4-valve DTS-i triple spark, fuel injection, liquid-cooling</li>
                    <li><i class="fas fa-cogs"></i> <span class="specs-bold">Clutch:</span> Slipper</li>
                    <li><i class="fas fa-sort-amount-down"></i> <span class="specs-bold">Brake System:</span> Dual Channel ABS</li>
                    <li><i class="fas fa-hand-holding-usd"></i><span class="specs-bold">Price:</span> <span class="price">2 299 EUR</span></li>
                </ul>
            </div>
        </div>
    </section>

 

komentarz 6 stycznia 2019 przez kralcz88 Obywatel (1,810 p.)
Cały kods na codepen

https://codepen.io/anon/pen/LMmbdo

Podobne pytania

+1 głos
1 odpowiedź 137 wizyt
0 głosów
1 odpowiedź 225 wizyt
pytanie zadane 7 października 2019 w HTML i CSS przez R.orlinski Mądrala (5,490 p.)
0 głosów
1 odpowiedź 179 wizyt
pytanie zadane 13 czerwca 2016 w HTML i CSS przez Alterwar Dyskutant (7,650 p.)

92,695 zapytań

141,606 odpowiedzi

320,106 komentarzy

62,052 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...