zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Durch :active Kindelement einblenden und "einfrieren" und Transition Spielerei

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.07.2016, 02:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.02.2016
Beiträge: 17
kabopress befindet sich auf einem aufstrebenden Ast
Standard Durch :active Kindelement einblenden und "einfrieren" und Transition Spielerei

Hallo zusammen,

ich habe ein Glossar auf meiner Seite erstellt und bekomme es nicht hin, dass beim klicken des "Fachbegriffs" der dazugehörige Content stehen bleibt.

Das Glossar ist bei einer Pixelbreite < 611 px sichtbar.

Dazu hätte ich gerne, dass der Content langsam eingeblendet wird. Transition funktioniert hier irgendwie nicht.

Wenn ihr auf Bartstile klickt seht ihr, dass beim :hover über die jeweilige box die box auf der x Achse verschoben wird. Wenn der Mauszeiger woanders hinbewegt wird, springt die box ruckartig in die Ausgangsposition zurück.
Gibt es eine Möglichkeit, dass das zurückspringen ebenfalls "smooth" abläuft?

Das Glossar ist über Barttrimmer Test | Bartschneider Test ++ TOP 5 inkl. Testvideo ++ ganz unten zu finden.

Die erwähnten Boxen unter Bartvariationen | Bartstile | Barttypen


Besten Dank im Voraus und erstmal Gute Nacht [emoji28]


Gesendet von iPhone mit Tapatalk
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.07.2016, 02:05
Neuer Benutzer
neuer user
 
Registriert seit: 25.06.2016
Beiträge: 7
Killerbear befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von kabopress Beitrag anzeigen
ich habe ein Glossar auf meiner Seite erstellt und bekomme es nicht hin, dass beim klicken des "Fachbegriffs" der dazugehörige Content stehen bleibt.
Das versteh ich nicht wirklich.
Wie soll er stehen bleiben?
Was meinst du denn mit "stehen bleiben"?

Zitat:
Zitat von kabopress Beitrag anzeigen
Wenn ihr auf Bartstile klickt seht ihr, dass beim :hover über die jeweilige box die box auf der x Achse verschoben wird. Wenn der Mauszeiger woanders hinbewegt wird, springt die box ruckartig in die Ausgangsposition zurück.
Gibt es eine Möglichkeit, dass das zurückspringen ebenfalls "smooth" abläuft?
Der transition effect ist momentan nur auf dem .bartbox:hover.
Das bedeutet, dass der effekt nur beim hovern passiert.
Wenn der Mauszeiger woanders hinbewegt wird, dann trifft der :hover Fall nicht mehr zu
und dadurch gelten auch die Regeln nicht mehr, die in .bartbox:hover festgelegt wurden.

Damit die Animation sowohl beim hovern wie auch beim austritt startet, muss die Eigenschaft transition
auf das normale .barbox Element angewendet werden

Code:
.bartbox {
  transition: all .7s
}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.07.2016, 02:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.02.2016
Beiträge: 17
kabopress befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Damit die Animation sowohl beim hovern wie auch beim austritt startet, muss die Eigenschaft transition auf das normale .barbox Element angewendet werden
Okay verstehe. Ich dachte es gäbe eine Eigenschaft, die transition quasi umkehrt beim beenden der Bedingung. Cool, hat geklappt!

Zitat:
Das versteh ich nicht wirklich.
Wie soll er stehen bleiben?
Was meinst du denn mit "stehen bleiben"?
Sorry, da habe ich mich etwas schwammig ausgedrückt:

Sobald man auf den Begriff wie bspw. NimH Akku klickt, so wird die Beschreibung eingeblendet. Lässt man die Maustaste wieder los, so verschwindet die Beschreibung auch wieder. Ich möchte aber nicht, dass die Beschreibung wieder verschwindet, sondern erst, wenn nochmals auf den Begriff NimH Akku geklickt wird.

Also quasi ein "Auf- und zuklappen"
Mit Zitat antworten
  #4 (permalink)  
Alt 05.07.2016, 02:03
Neuer Benutzer
neuer user
 
Registriert seit: 25.06.2016
Beiträge: 7
Killerbear befindet sich auf einem aufstrebenden Ast
Standard

Elemente per Mausklick ein- und ausblenden funktioniert leider nur per javascript.

Man kann per css :target Elemente mit einem Klick einblenden aber nicht wieder per klick ausblenden.

Aber ich sehe schon MrMurphy hier schreiben:
Zitat:
Elemente per click ein- und ausblenden ist nicht barrierefrei, weil nicht jeder versteht, dass man auf das Element klicken muss um weitere Informationen angezeigt zu bekommen
Obwohl das machmal nicht so pauschal stimmt, würde ich das hier aber auch so sehen.
Momentan sind alle wichtigen Informationen auf den ersten Blick ersichtlich und übersichtlich dargestellt.
Die Erläuterungen hinter einem zusätzlichen Klick zu verstecken, ist hier unnötig.
Das sieht vielleicht fancy aus aber ist nicht benutzerfreundlich.
Mit Zitat antworten
  #5 (permalink)  
Alt 05.07.2016, 05:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.02.2016
Beiträge: 17
kabopress befindet sich auf einem aufstrebenden Ast
Standard

Okay verstehe. Ich bin am Schwanken: Entweder ist das Glossar auf Smartphones dann komplett ausgeklappt und man muss sich zum footer durchschlagen, oder ich löse das ganze per :hover, da auf dem Smartphone :hover durch "Klick" ausgelöst wird und beim "danebentippen" der Inhalt wieder verschwindet.
Keine tolle Lösung, daher bin ich noch am überlegen :magreren:

Besten Dank!
Mit Zitat antworten
  #6 (permalink)  
Alt 05.07.2016, 08:30
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Elemente per Klick ein- und ausblenden funktioniert sehr wohl auch ohne Javascript. Hier hast du zB 4 verschiedene Möglichkeiten um dein Vorhaben umzusetzen, welche am Besten für dein Projekt passt musst du natürlich selber entscheiden.
Mit Zitat antworten
  #7 (permalink)  
Alt 06.07.2016, 01:59
Neuer Benutzer
neuer user
 
Registriert seit: 25.06.2016
Beiträge: 7
Killerbear befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Elemente per Klick ein- und ausblenden funktioniert sehr wohl auch ohne Javascript. Hier hast du zB 4 verschiedene Möglichkeiten um dein Vorhaben umzusetzen, welche am Besten für dein Projekt passt musst du natürlich selber entscheiden.
nice sachen.
Methode 2 wäre ja genau das, was der Thread Ersteller gesucht hat.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Wie Transition starten, wenn die Seite geladen wird? bigtail CSS 3 20.10.2012 23:07


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:45 Uhr.