Fallback für CSS3 transitions

Ich habe eine CSS3 übergang, Größe/Positionen ein Bild innerhalb eines div-auf hover.

FIDDLE

Dieser funktioniert wie gewünscht, aber meine Sorge ist, über Browser, keine Unterstützung für CSS3 transitions wie IE9-. Wäre es möglich, schreiben, der diese CSS-code so, dass dieser Browser einen fallback?

Ideal, das fallback angezeigt werden soll das Bild so, dass es passt das div-Element und nicht zommed (fiddle-Beispiel) und keine animation auf schweben.

Ich würde lieber eine CSS Lösung und nicht zu ändern, das markup.

Vollständige code-Beispiel :

HTML :

<div><img src="http://lorempixel.com/output/people-q-c-1000-500-7.jpg" />

CSS :

div{
    overflow:hidden; 
    width:500px; 
    height:250px;
    position:relative;
}
img{
    display:block;
    position:absolute;
    height:auto;
    width:200%;
    left:-30%;
    top:-60%;

    -webkit-transition-property: width, left, top;
    -webkit-transition-duration: .8s;
    -webkit-transition-timing-function: ease-out;
    transition-property: width, left, top;
    transition-duration: .8s;
    transition-timing-function: ease-out;
}
div:hover img{
    width:100%;
    top:0;
    left:0;
}
  • Außer der Unterstützung für übergänge ist viel weiter verbreitet, als @supports.
  • es ist schwer zu glauben, dass der IE9 unterstützt kein übergang, ich habe nie versucht meine demos im IE9 aber ich erinnere mich, dass ich die Prüfung über transition-Funktion auf caniuse, es wird berichtet, dass der IE9 unterstützt hat, den übergang. Vielleicht ist meine Erinnerung falsch ist. Zu Ihrer Frage, es ist unklar, auf den fallback-Ergebnis, die Sie wollen. Meinst du, das Ergebnis sollte sein, zunächst auf das Bild angewendet, oder wenn Sie den Mauszeiger?
  • Oh stimmt .. habe ich nicht wirklich angeschaut unterstützen. Nevermind dann.
  • wenn einige brower unterstützt @supports, wäre es sicherlich unterstützen, den übergang 🙂
  • Ich hatte das gleiche Gefühl, wenn ich überprüft canIuse war sich aber nicht sicher, entweder. Für die fallback-es sollten keine hover-animation und zeigt das Bild wie in diesem fiddle-Beispiel jsfiddle.net/webtiki/qXPFA/2
  • Ich meine, das Ergebnis soll gezeigt werden, wie der normale Zustand oder den hover-Zustand des Bildes? wenn es den hover-Zustand, ich denke, deine CSS arbeiten würde, auf den IE9, wenn es keine Unterstützung für den übergang, den hover-Zustand sofort angewendet wird.
  • das ist das, was ich gerne vermeiden möchte, muss ich das Bild haben keinen hover-Effekt und das Bild anzuzeigen, zum Beispiel mit width:100%;height:auto für Browser, die nicht unterstützen, übergänge.
  • Ich habe gerade realisiert, dass ich hatte, dass Gefühl, über die css-übergänge, die von IE9 unterstützt, da war ich comfiusing Sie mit transform - Eigenschaft Hexe, die von IE9 unterstützt
  • Ich habe gerade gesucht, eine Antwort von mir über übergang/animation. Die Lösung wird mit einer animation, aber der OP fragte nach einer funktionierenden Lösung in IE9. Ich erinnere mich, während der Suche nach einem workaround für diese Anforderung habe ich versucht, herauszufinden, ob transition unterstützt IE9 (via caniuse.com), sieht aus wie damals ich sah, dass es unterstützt, so dass ich ging voran mit der multi-übergänge-Lösung (ersetzen der animation). Die OP schien zu prüfen, die Lösung und sagte yup Ordnung, die in IE9 (den letzten Kommentar). Ich hatte keine Zweifel, dass...
  • hier ist der link zu meiner Antwort stackoverflow.com/questions/24016088/...
  • nun scheint es, er war glücklich mit der keine transition Effekt wie der IE9 nicht unterstützt übergänge getestet habe ich den oben genannten code im IE-tester ein, es funktioniert nicht IE9-
  • ja, ich habe gerade festgestellt, dass über den chat-link in den Kommentar, er Links, ich habe überprüfen Sie, ob der übergang unterstützt wird, bevor Sie die Problemumgehung demo, aber vielleicht haben meine Augen ein problem hatten, damals.

InformationsquelleAutor web-tiki | 2014-06-19
  1. 3

    Generell, CSS-übergänge (und die meisten CSS, wirklich) wurden entwickelt, mit progressive enhancement im Auge. Die vorgesehene fallback in Browsern, die nicht verstehen, übergänge, ist schlicht und einfach zu ignorieren, die Eigenschaften der transition selbst. Dies ermöglicht die style-änderungen noch stattfinden, nur sofort und nicht in einem glatten übergang (wie angedeutet durch den Namen), und entfällt die Notwendigkeit für komplexe workarounds.

    Was Sie suchen, zu tun ist jedoch nicht jede Veränderung im Staat auftreten; Sie wollen, dass Ihr image Feste in der ungezoomten Zustand. Das dauert ein bisschen mehr Arbeit.

    Wenn @supports hatte, wurde umgesetzt, am Anfang, Sie könnte leicht Weg mit

    img{
    display:block;
    position:absolute;
    height:auto;
    width:100%;
    top:0;
    left:0;

    -webkit-transition-property: width, left, top;
    -webkit-transition-duration: .8s;
    -webkit-transition-timing-function: ease-out;
    transition-property: width, left, top;
    transition-duration: .8s;
    transition-timing-function: ease-out;
}

@supports (-webkit-transition-property: all) or (transition-property: all) {
    div:not(:hover) img{
        width:200%;
        left:-30%;
        top:-60%;
    }
}

    Aber natürlich nicht alles auf diese Weise funktioniert. Es ist wirklich schade, dass @supports vorgeschlagen wurde so spät und Implementierungen noch noch nicht erwischt. Aber ich schweife ab.

    Blick auf die Unterstützung von Tabellen caniuse.com es sieht aus wie Gecko - und WebKit/Blink-basierten Browsern werden sehr gut abgedeckt (außer vielleicht Firefox 3.6 und älter), ist eine Erleichterung, weil ich kann mir nicht vorstellen, dass es eine Reine CSS-basierte Lösung zu bieten, um diese Motoren (andere als hässlich hacks).

    Für andere Browser kann ich sehen Sie einige andere Problemumgehungen:

    • Kann es sich lohnen, einschließlich der -o- Präfix, wenn Sie sich über Presto Opera.

    • Ebenfalls mit -moz- wenn Sie sich über Firefox < 16.

    • Für den IE, einfach ausblenden des div:not(:hover) img Regeln in der bedingten Kommentare ist genug, da die erste version von IE unterstützen übergänge und ignorieren, bedingte Anweisungen, passiert das gleiche — version 10:

      <!--[if !IE]><!-->
<style>
div:not(:hover) img{
    width:200%;
    left:-30%;
    top:-60%;
}
</style>
<!--<![endif]-->

      Beachten Sie die Verwendung von div:not(:hover) hier, Analog zu den hypothetischen @supports Beispiel oben. Sie müssen swap die Erklärungen mit Ihrem img Regel entsprechend.

    • Ich werde gehen, für die Sie bedingte Anweisungen und fügen Sie eine Klasse, um die <body> tag wie gewohnt. CSS kann nicht alles tun...
    InformationsquelleAutor BoltClock
  2. 4

    Könnten Sie Modernizr oder gehen Sie durch die javascript-Funktion, Erkennung route.

    Beide Möglichkeiten sind hier beschrieben:
    Detect Unterstützung für den übergang mit JavaScript

    • Ich habe gerade realisiert, unsere Antworten unterscheiden sich um eine ganze Sekunde. Ja, ich Stimme zu, dass die zuverlässigste Lösung wäre die Verwendung von JavaScript feature-Erkennung. CSS selbst ist nicht nur gut gerüstet für den CSS-feature-Erkennung noch.
    • Ziemlich cool, nicht wahr? Vielleicht sollte ich noch schnellere internet. 🙂
    • Danke für die Beantwortung, aber ich würde lieber nicht verwenden, um zusätzliche JS auf dieses Projekt.
    InformationsquelleAutor aa333
  3. 2

    Können nicht Lügen uns selbst, der einzige browser, den wir sprechen, ist IE9, so gehen Sie einfach hinzufügen:

    width: 200%\9;
left: -30%\9;
top: -60%\9;

    und IE9 verwenden. Wir können nur hoffen, dass im Jahr 2017 wird es keine Notwendigkeit mehr für CSS-hacks.

    InformationsquelleAutor skobaljic
Schreibe einen Kommentar