jQuery Mobile CSS3-pagina Overgangen zonder jQuery Mobile Library

Ik heb een mobiele app gemaakt met HTML/JS (jQuery)/CSS en ik ben op zoek naar pagina-overgangen die lijken op die gevonden in jQuery Mobile (in het bijzonder de flip-overgang) zonder de noodzaak om het hele jQuery Mobile Framework op te nemen.

Deze animaties lijken CSS3-overgangen te zijn gekoppeld aan jQuery-triggers, maar ik heb geen idee waar ik moet beginnen. Heeft iemand ideeën?

Alle hulp wordt zeer op prijs gesteld!

7
Je zou naar de pagina-overgangsbibliotheek kunnen kijken zoals ik weet. JQM ontkoppelt widgets vanaf Beta RC2: jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-releas‌ ed bekijk dit: github.com/jquery/jquery-mobile/tree/master/js
toegevoegd de auteur Phill Pafford, de bron
@PhillPafford Bedankt; dat is perfect.
toegevoegd de auteur dSquared, de bron

3 antwoord

Download de niet-verkleinde versie van het CSS-bestand voor jQuery Mobile en kopieer de klassen uit voor de specifieke overgangen die u wilt.

The CSS can be found here: http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.css

En de code voor overgangen begint op regel 1270. Als u alle CSS-klassen kopieert voor overgangen, is dit slechts ongeveer 6 KB aan informatie.

Hier is een voorbeeldcode uit het bovenstaande CSS-bestand:

.viewport-flip {
    -webkit-perspective: 1000;
    position: absolute;
}

.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.flip {
    -webkit-animation-duration: .65s;
    -webkit-backface-visibility:hidden;
    -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
}

.flip.out {
    -webkit-transform: rotateY(-180deg) scale(.8);
    -webkit-animation-name: flipouttoleft;
}

.flip.in {
    -webkit-transform: rotateY(0) scale(1);
    -webkit-animation-name: flipinfromleft;
}

Dus om een ​​element in te klappen, zou je de klasse .flip en de klasse .in toevoegen en een element uitkippen dat je zou toevoegen aan de .flip klasse en de klasse .out .

Ook bevat de jQuery CSS alleen -webkit - prefixen, maar als u meer browsers wilt ondersteunen, kunt u andere voorvoegsels toevoegen, zoals: -moz - , -o- , etc.

8
toegevoegd
Perfect; Ik dacht erover om dit volgende te proberen en het lijkt erop dat het de juiste weg is. Dank je!
toegevoegd de auteur dSquared, de bron
Nog beter; nogmaals bedankt.
toegevoegd de auteur dSquared, de bron
Bekijk de opmerking van Phill over je vraag. Als je door de bestanden in die GIT-repository kijkt, kom je dit tegen: github.com/jquery/jquery-mobile/blob/master/js/… . Dat is minder dan 2 KB en zorgt voor het toevoegen/verwijderen van de noodzakelijke CSS aan de elementen die u animeert.
toegevoegd de auteur Jasper, de bron
WAUW !! dat was een gave truc :)
toegevoegd de auteur Anmol Saraf, de bron

Bekijk 'Non-Jquery Page Transitions lightweight' door fasw.

Demo here: http://www.fasw.ws/demos/transitions1/slide1.html

And source here: http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/

Dit zijn 1.7k aan JS-producerende overgangen die precies hetzelfde zijn als die geproduceerd door de hele mobiele jQuery Lib.

3
toegevoegd

Je zou naar de pagina-overgangsbibliotheek kunnen kijken zoals ik weet, jQM ontkoppelt widgets vanaf Beta RC2:

1
toegevoegd