创建自定义的基于css的转场效果

来源：互联网发布：网络会议系统编辑：程序博客网时间：2024/06/06 05:06

创建自定义的基于css的转场效果 Creating custom CSS-based transitions

如果想要创建一个自定义的css转场效果，选择一个与转场的DOM对应的class选择符，比如：“"slide"，然后使用csstransitions和关键帧动画定义自己的“in”和“out”的css规则。

css代码

.slide.in {　　-webkit-transform: translateX(0);　　-moz-transform: translateX(0);　　-webkit-animation-name: slideinfromright;　　-moz-animation-name: slideinfromright;}.slide.out {　　-webkit-transform: translateX(-100%);　　-moz-transform: translateX(-100%);　　-webkit-animation-name: slideouttoleft;　　-moz-animation-name: slideouttoleft;}

@-webkit-keyframes slideinfromright {　　from { -webkit-transform: translateX(100%); }　　to { -webkit-transform: translateX(0); }}@-webkit-keyframes slideouttoleft {　　from { -webkit-transform: translateX(0); }　　to { -webkit-transform: translateX(-100%); }}@-moz-keyframes slideinfromright {　　from { -moz-transform: translateX(100%); }　　to { -moz-transform: translateX(0); }}@-moz-keyframes slideouttoleft {　　from { -moz-transform: translateX(0); }　　to { -moz-transform: translateX(-100%); }}

在页面转场过程中，jQuery Mobile会将转场的class 名放入转场的“来自”和“到达”的两个页面中。然后将"out"class 放入“来自”页面中，"out"class 放入“到达”页面中。

如果你的页面转场支持后退，你需要使用.reverse类，加到"in"和"out"类中

css代码

.slide.in.reverse {　-webkit-transform: translateX(0);　-moz-transform: translateX(0);　-webkit-animation-name: slideinfromleft;　-moz-animation-name: slideinfromleft;}

.slide.out.reverse {　-webkit-transform: translateX(100%);　-moz-transform: translateX(100%);　-webkit-animation-name: slideouttoright;　-moz-animation-name: slideouttoright;}

@-webkit-keyframes slideinfromleft {　from { -webkit-transform: translateX(-100%); }　to { -webkit-transform: translateX(0); }}

@-webkit-keyframes slideouttoright {　from { -webkit-transform: translateX(0); }　to { -webkit-transform: translateX(100%); }}@-moz-keyframes slideinfromleft {　from { -moz-transform: translateX(-100%); }　to { -moz-transform: translateX(0); }}

@-moz-keyframes slideouttoright {　from { -moz-transform: translateX(0); }　to { -moz-transform: translateX(100%); }}

写好css规则之后，只需要给要导航的链接的data-transition属性指定为自己的css名字就可以了。

html代码

Page 2

当用户点击此链接时，jQuery Mobile会调用你自己写css转场。上面的css规则中都没有定义css animation的缓动或缓冲，是因为jQuery Mobile 的css中默认定义了.in, .out的css缓动

css代码

.in {　-webkit-animation-timing-function: ease-out;　-webkit-animation-duration: 350ms;　-moz-animation-timing-function: ease-out;　-moz-animation-duration: 350ms;}

.out {　-webkit-animation-timing-function: ease-in;　-webkit-animation-duration: 225ms;　-moz-animation-timing-function: ease-in;　-moz-animation-duration: 225;}

0 0