Potrzebuję przejścia CSS3 do pracy w IE9

Question

Potrzebuję przejścia CSS3 do pracy w IE9

Tworzę kartkę z życzeniami dla klienta z css transition, ale nie wiedziałem, że nie jest zgodna z IE9.

Kartka z życzeniami to to http://voeux.geekarts.fr/v4.html

Czy Jest jakiś sposób aby to działało w IE9 ? wstawienie jQuery lub jakiegoś hacka-coś, żeby zadziałało w IE9.

Thanks

22

css-transitions internet-explorer-9

Author: Sampson, 2013-12-20

Source

2 answers

Możesz spróbować odwrotnego podejścia z jQuery Transit http://ricostacruz.com/jquery.transit/

Mapuje przejścia w stylu JQuery do przejść w CSS3 i z odpowiednim kodem (poniżej), jeśli przejścia w CSS3 nie są dostępne, może z wdziękiem wrócić do standardowego JQuery.

JQuery Transit używa prostej metody Javascript, transition () do wykonywania każdej operacji. Składnia jest bardzo podobna do jQuery animate ().

$('.box').transition({ opacity: 0 });

Jeśli " Mapa" transition () do jQuery animate() wykona tę samą operację w standardowym JQuery (jeśli jest dostępna). Poniższy kod (zaczerpnięty ze strony przykładu) użyje metody animate (), jeśli przejścia w CSS3 nie są dostępne:

// Delegate .transition() calls to .animate()
// if the browser can't do CSS transitions.

if (!$.support.transition)
  $.fn.transition = $.fn.animate;

3

Author: FrancescoMM,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-16 07:17:45

score 50 · Accepted Answer

Jak prawidłowo zidentyfikowałeś, Internet Explorer 9 był ostatnią przeglądarką IE, która nie obsługuje transition property , or animations. To powiedziawszy, była to również ostatnia z przeglądarek IE, która wspierała komentarze warunkowe, więc można było umieścić kod zapasowy w komentarzu warunkowym tylko dla IE9 i dostarczyć go jako rozwiązanie dla wszystkich użytkowników IE9 (i poniżej).

<!--[if lte IE 9]>
    <script src="animation-legacy-support.js"></script>
<![endif]-->

To, oczywiście, będzie dostarczane tylko w przeglądarce jest Internet Explorer 9 lub niżej. Teraz pozostaje Ci tylko skonfigurować samą animację jQuery. Na przykład, możemy uruchomić obraz przez serię przejść, takich jak:

(function () {

    "use strict";

    $("img.kitten")
        .animate({ width:   300 }, 1000)  // Animate to 300px wide
        .animate({ width:    50 }, 2000)  // Then, to 50px wide
        .animate({ opacity: .25 }, 1000); // Then, make it semi-transparent

}());

Za każdym razem, gdy musisz skonfigurować kolejną klatkę kluczową , po prostu dodaj kolejne wywołanie do $.fn.animate i ustaw swój stan docelowy, a także czas trwania animacji.

Ważną rzeczą jest to, że musisz załadować wersję jQuery, która obsługuje docelowe wersje IE . jQuery 2.x obsługuje Tylko Internet Explorer 9 i nowsze, jednak jQuery 1.x obsługuje przeglądarkę Internet Explorer w wersji 6 i nowszej.

Mam nadzieję, że to pomoże!