Hier ist ein einfaches Beispiel, um zu zeigen, was ich möchte: Ссылка
Ich habe mich gefragt, ob es überhaupt noch ein Overlay transition von links gibt, aber dann von der rechten Seite zu verlassen.
Beim Überfahren kommt also die Überlagerung wie im Beispiel, aber statt nach links zurück zu transition s nach rechts.
Ist das möglich? (muss nicht unbedingt transition verwenden, ich bin offen für jeden Weg, es zu tun).
Hier ist eine einfache Lösung, die nicht mehr HTML oder JavaScript benötigt:
HTML-Code:
%Vor%CSS-Code:
%Vor%Dies nutzt den Spielraum für die Animation. Es funktioniert wie folgt:
left links vom Element positioniert ist). 0 ohne Animation. Dadurch kann die Animation left von der linken Seite des Elements aus ausgeführt werden. Ich habe versucht, dies nur mit CSS zu erreichen, einschließlich additiona div markup wie folgt DEMO
HTML
%Vor%CSS
%Vor%Vielleicht können Sie CSS3-Animationen verwenden, wobei Sie eine zum Verschieben verwenden in und eine andere zum Herausgleiten:
%Vor% Jetzt können Sie die Animation overlay-in auf :hover und die andere auf die normale Elementdefinition anwenden:
Aber es gibt ein Problem damit: Die Slide-Out-Animation wird beim Laden der Seite einmal abgespielt. Ich kann keinen Weg finden, dies ohne ein winziges JavaScript zu verhindern, indem ich dem Overlay des ersten mouseout -Ereignisses eine Klasse hinzufüge. Ich habe es in einer JSFiddle so gemacht.
Aber natürlich, sobald Sie JavaScript benötigen, könnten Sie auch einfache Übergänge verwendet haben. Aber diese Methode funktioniert auch ohne JavaScript, wenn Sie mit der Animation beim Laden der Seite leben können.