Kod CSS dla hover wykonywany przez javascript

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

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.

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>