JQuery Mobile CSS3 Page Transitions без JQuery Мабільная бібліятэка

У мяне ёсць мабільнае прыкладанне створана з выкарыстаннем HTML/JS (Jquery)/CSS, і я шукаю, каб уключыць пераходы старонак, якія імітуюць тыя, што ў jQuery Mobile (у канкрэтным пераходзе абаротнага) без неабходнасці ўключаць ўвесь jQuery Mobile Framework.

Гэтыя анімацыі, як уяўляецца, CSS3 пераходы звязаны з jQuery трыгераў, але я паняцця не маю, з чаго пачаць. Хто-небудзь ёсць якія-небудзь ідэі?

Любая дапамога будзе прынятая з удзячнасьцю!

7
Вы можаце паглядзець у бібліятэку толькі старонка пераходу, як я ведаю, jQM з'яўляецца развязкай віджэтаў, як бэта RC2: jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-releas‌ выд паглядзіце на гэта: github.com/jquery/jquery-mobile/tree/master/js
дададзена аўтар Phill Pafford, крыніца
@PhillPafford Дзякуй; Выдатна.
дададзена аўтар dSquared, крыніца

3 адказы

Спампаваць без мінімізаваць версіі файла CSS для jQuery Mobile і выпісваць класы для канкрэтных пераходаў, якія вы хочаце.

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

А код для пераходаў пачынаецца ў радку 1270. Пры капіяванні, з усіх класаў CSS для пераходаў, гэта толькі 6kb з інфармацыі.

Вось некалькі прыкладаў кода з прыведзенага вышэй файла CSS:

.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;
}

Такім чынам, каб перавярнуць ў элеменце трэба дадаць .flip <�код /> клас і клас, і фліп-з элемента трэба дадаць .flip клас і .out клас.

Акрамя таго, jQuery CSS ўключае ў сябе толькі -webkit - прэфіксы, але калі вы хочаце, каб падтрымліваць больш браўзэраў вы можаце дадаць іншыя прэфіксы: -moz - , -о- і г.д.

8
дададзена
ідэальны; Я думаў пра спробу гэта наступны і, падобна, яго шлях. Дзякуй!
дададзена аўтар dSquared, крыніца
Яшчэ лепш; яшчэ раз дзякую Вас.
дададзена аўтар dSquared, крыніца
Высяленне каментар Phill на ваша пытанне, калі вы глядзіце праз файлы ў гэтым GIT рэпазітара вы сутыкнецеся гэта: github.com/jquery/jquery-mobile/blob/master/js/… . Што менш 2KB і ручкі дадання/выдалення неабходнага CSS да элементаў вы ажыўляе.
дададзена аўтар Jasper, крыніца
WOW !! гэта быў круты трук :)
дададзена аўтар Anmol Saraf, крыніца

Праверце 'Non-Jquery Page Transitions палегчаны' па fasw.

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

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

Гэта 1.7k з JS вырабляе пераходы, якія гэтак жа, як вырабленыя ў цэлым мабільны jQuery Lib.

3
дададзена

Вы можаце паглядзець у бібліятэку толькі старонка пераходу, як я ведаю, jQM з'яўляецца развязкай віджэтаў як бэта RC2:

1
дададзена