jquery - addClass / (s)css - transition

k3nguruh

Erfahrenes Mitglied
Hallo,

Mit der CSS Eigenschaft "transition" soll das hovern über den Button etwas verschönert werden.
Trage ich die ".button" Klasse im HTML Code direkt ein, funktioniert es wie gewünscht. Wird die Klasse über jQuery gesetzt, wird gleich eine Transition bei / nach dem laden der Seite aufgerufen.

Ich habe mal ein jsfiddle erstellt, um das Problem zu veranschaulichen... Ggf. öfters mal auf RUN klicken.

Das Verhalten erscheint mir auch etwas logisch ....
Aber bekommt man es irgendwie hin, dass sich der 2. Button trotzdem wie der 1. Button verhält?

Schon einmal besten Dank fürs durchlesen.
 

k3nguruh

Erfahrenes Mitglied
Hallo,

jepp, so funktioniert es erstmal.
Komisch ist, dass es ohne jquery (jsfiddle) auch mit meinem Code funktioniert. Da muss man nicht mal die '.ani' Klasse bemühen.

Ich habe bisher vieles mit jquery gelöst. Vll. muss ich davon auch weg.

Erstmal Danke.
 

Sempervivum

Erfahrenes Mitglied
Da muss man nicht mal die '.ani' Klasse bemühen.
Dann war diese möglicher Weise gar nicht ausschlaggebend sondern die Reihenfolge. In deinem jQuery sehe ich ein $(function() { was, wenn ich mich richtig erinnere, auf ein document-ready hinaus läuft. Dadurch könnte die Ausführung ein wenig verzögert werden.
 

k3nguruh

Erfahrenes Mitglied
Hallo,

also dein Code (mit der '.ani' Klasse) funktioniert leider auch nicht (mehr). Es scheint so, dass jsFiddle den ganzen Code anders interpretiert und gutmütiger ist.

Ich habe das jetzt bei mir eingebaut und auch mal bei codepen.io getestet (Neuladen mit Strg+F5).
Beides schlägt fehl.
 

Sempervivum

Erfahrenes Mitglied
OK, bei jsfiddle und codepen weiß man nie so genau wann und wo das Javascript ausgeführt wird. Ich glaubte, mich zu erinnern, dass das irgend wie zu konfigurieren ist aber kann es nirgend wo finden.

Wenn ich das jedoch in eine Testdatei mit VS-Code eintrage, funktioniert es einwandfrei und in allen Varianten, kein schwarzer Rahmen beim Neuladen zu sehen. Mein Testcode:
Code:
<!DOCTYPE html>

<html lang="de">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Add Class Transition Issue</title>
    <style>
        .wrapper {
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            height: 50vh;
        }

        .wrapper .button {
            display: block;
            padding: 0.25em 0.5em;
            border-width: 5px;
            border-style: solid;
            cursor: pointer;
            border-color: green;
            background-color: none;
            color: green;
            transition: border-color 5s, background 5s, color 5s;
        }

        .wrapper .button:hover {
            border-color: darkgreen;
            background-color: green;
            color: white;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <!-- Button-Class vorhanden -->
        <span class="button ani">
            Button-Class vorhanden
        </span>
        <!-- Button-Class nachgeladen -->
        <span>
            Button-Class nachgeladen
        </span>
    </div>
    <script>
        document.querySelector("span:not(.button)").classList.add("button");
    </script>
</body>

</html>

Wenn es bei dir nicht funktioniert dann poste doch mal die URL deiner Seite. Du kannst auch versuchen, das Hinzufügen der Klasse "ani" ein wenig zu verzögern:
Code:
        document.querySelector("span:not(.button)").classList.add("button");
        setTimeout(() => {
            document.querySelector("span:not(.ani)").classList.add("ani");
        }, 10);
 

Quaese

Moderator
Moderator
Hi,

jQuerys .ready() (Äquivalent zu $(function()) wird ausgeführt, wenn DOMContentLoaded gefeuert wird. Zu diesem Zeitpunkt ist der DOM soweit erstellt, dass er sicher manipuliert werden kann.

Interessanter Artikel zum Renderzyklus/kritischen Renderpfad: Measuring the Critical Rendering Path

Damit:
1. bevor jQuery ausgeführt wird, ist das span ohne CSS-Klasse bereits mit Defaultwerten (z.B. schwarzer Rahmen) als Knoten (Node) in den DOM gerendert
2. im ready-Handler wird jQuery ausgeführt und die Klasse button auf den Knoten geschrieben => die Transition auf den Basis-Style wird ausgeführt

Das ist die Ursache, warum es erscheint, als würde die Transition "verzögert" ausgeführt werden.

Ich hoffe, das bringt etwas mehr Klarheit.

Ciao
Quaese