CSS Animation vor Redirect?

3 Antworten

Vom Fragesteller als hilfreich ausgezeichnet
Functional
29.10.2019, 15:00

Das lässt sich nur mittels JavaScript bewerkstelligen. Hier ein Beispiel mit jQuery, wobei es aber auch ohne jQuery (pures JavaScript) funktioniert, Google und MDN helfen weiter.

$('.testbutton').click(function(){ //Wenn Element mit der Klasse testbutton geklickt wird...
    $('.intro').addClass('animation_out'); //Füge dem Element mit der Klasse intro die Klasse animation_out hinzu
    setTimeout(function(){ //Und leite nach 1000ms (1s) auf seite2.html weiter
        window.location.href = "seite2.html";
    }, 1000);
});
Woher ich das weiß:Berufserfahrung – Inhaber einer App-Agentur & 15+ Jahre Programmiererfahrung
Rolajamo 
Fragesteller
 29.10.2019, 15:04

Kann ich das

setTimeout(function(){ window.location.href = "seite2.html";}, 1000);

auch direkt auf ALLE Links anwenden? Sonst bräuchte ich ja für jeden ausgehenden Link ein eigenes Script?

0
regex9  29.10.2019, 15:12
@Rolajamo

Im obigen Fall werden sich alle Links, die die Klasse testbutton haben, schon entsprechend verhalten. Dafür sorgt der Selektor:

$('.testbutton')

Ohne jQuery könnte eine Lösung so aussehen:

let testbuttons = document.getElementsByClassName("testbutton");

for (let i = 0; i < testbuttons.length; ++i) {
  testbuttons[i].addEventListener("click", function() {
    // redirect ...
  });
}

Oder man selektiert tatsächlich alle Links:

let testbuttons = document.getElementsByTagName("a");
// ...
0
Functional  29.10.2019, 15:14
@Rolajamo

Wie? Du meinst, wenn du mehrere Buttons hast, die jeweils woanders hinleiten sollen, mit der gleichen Animation? Theoretisch machbar, bedarf aber einer kleinen Umstellung deiner Struktur.
Du gibst jedem Button eine ID, z.B. id="button1", id="button2" usw.

Das JavaScript sähe dann (beispielhaft) so aus:

$('.testbutton').click(function(e){ //Wenn ein Element mit der Klasse testbutton geklickt wird...
    e.preventDefault() //Standardevent/Weiterleitung des a-Elements deaktivieren
    let buttonId = $(this).attr('id').replace('button', ''); //ID des geklickten Elements ohne das "button" speichern
    $('.intro').addClass('animation_out'); //Füge dem Element mit der Klasse intro die Klasse animation_out hinzu
    setTimeout(function(){ //Und leite nach 1000ms (1s) auf seite[id].html weiter, wo [id] die zuvor gespeicherte ID ist
        window.location.href = "seite"+id+".html";
    }, 1000);
});

Ansonsten, wenn ALLE a-Elemente mit der Animation weiterleiten sollen, kann man natürlich auch über $('a') diese direkt anvisieren. Hängt eben davon ab, was genau du vor hast und wie das Setup aussieht.

0
Rolajamo 
Fragesteller
 29.10.2019, 15:39
@Functional

Ich versuch das ganze grad in Codepen zu testen aber es funktioniert irgendwie nicht. Muss ich da noch ein bestimmtes Script laden damit das überhaupt funktioniert?

0
Functional  29.10.2019, 17:24
@Rolajamo

Wenn du das unter Codepen testest, solltest du jQuery auch aktivieren. Settings -> JavaScript -> dort im Bereich "Search CDNjs" nach jQuery suchen -> hinzufügen

0
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webseite, CSS
29.10.2019, 14:58

Mit JavaScript kannst du über die setTimeout-Funktion eine Weiterleitung zeitlich steuern.

In diesem Fall:

setTimeout(function() { window.location.href = "YOUR_TARGET_URL"; }, 1000);

würde die Aktion nach einer Sekunde ausgeführt werden.

Nachdem dem Link die CSS-Klasse zugefügt wurde, kannst du den Timer starten.
Tyldu  29.10.2019, 15:10

besser noch: das animationend event nutzen.

1
regex9  29.10.2019, 15:14
@Tyldu

Stimmt, das ist schöner. Ich würde es aber vorher nochmal in verschiedenen Browsern testen.

0
Tyldu  29.10.2019, 15:18
@regex9

sollte doch eigentlich schon lange jeder browser unterstützen.

im zweifel ist es eben "webkitAnimationEnd"

0
Tyldu
29.10.2019, 15:08

einfach nicht mit einem a element weiterleiten sondern über javacript

in javascript kannst du auch auf das animationend event lauschen und dann erst wenn die animation vorbei ist weiterleiten:

einfach nicht mit einem a element weiterleiten sondern über javacript:

const button = document.querySelector(".testbutton");

button.onclick = () => {
  button.style.animation = "redirectanimationout 1s 1";
  button.onanimationend = () => {
    window.location.href="https://www.gutefrage.net";
  }
}
Woher ich das weiß:Studium / Ausbildung – Softwareentwickler, B. Sc. Informatik