自定義jQuery Mobile轉換使用-webkit-mask

Question

我正在嘗試使用-webkit-mask轉換進行自定義jQuery Mobile轉換。

這裏是如何我已經設置了動畫功能：

.mask.in 
{ 
    -webkit-mask-position: 0 0; 
    -webkit-animation-name:maskInFromRight; 
} 
.mask.out{ 
    -webkit-mask-position: -100% 0; 
    -webkit-animation-name:maskOutToLeft; 
} 
.mask.in.reverse{ 
    -webkit-mask-position: 0 0; 
    -webkit-animation-name:maskInFromLeft; 
} 
.mask.out.reverse{ 
    -webkit-mask-position: 100% 0; 
    -webkit-animation-name:maskOutToRight; 
} 


@-webkit-keyframes maskInFromRight 
{ 
    0% { -webkit-mask-position:100% 0; } 
    100% { -webkit-mask-position:0 0; } 
} 

@-webkit-keyframes maskOutToLeft 
{ 
    0% { -webkit-mask-position:0 0; } 
    100% { -webkit-mask-position:-100% 0; } 
} 

@-webkit-keyframes maskInFromLeft 
{ 
    0% { -webkit-mask-position:-100% 0; } 
    100% { -webkit-mask-position:0 0; } 
} 

@-webkit-keyframes maskOutFromRight 
{ 
    0% { -webkit-mask-position:0 0; } 
    100% { -webkit-mask-position:100% 0; } 
} 

根據他們提供的例子：現在它不使用自定義動畫和

http://jquerymobile.com/demos/1.1.1/docs/pages/page-customtransitions.html

權下一頁正在出現。

Answer 1

因此，任何人想知道。我已經離開了Webkit掩碼，並用css3剪輯過渡。

.superClip.in, 
.superClip.out{ 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-duration: 350ms; 
} 

.superClip.in { 
     clip: rect(0px, 2048px, 1536px, 0px); 
     -webkit-animation-name: superClipInRight; 
} 
@-webkit-keyframes superClipInRight { 
    from { clip: rect(0px, 2048px, 1536px, 2048px); } 
     to { clip: rect(0px, 2048px, 1536px, 0px); } 
} 

.superClip.out { 
     clip: rect(0px, 0px, 1536px, 0px); 
    -webkit-animation-name: superClipOutLeft; 
} 
@-webkit-keyframes superClipOutLeft { 
    from {clip: rect(0px, 2048px, 1536px, 0px); } 
    to { clip: rect(0px, 0px, 1536px, 0px); } 
} 

.superClip.in.reverse { 
     clip: rect(0px, 2048px, 1536px, 0px); 
     -webkit-animation-name: superClipInRightRev; 
} 
@-webkit-keyframes superClipInRightRev { 
    from { clip: rect(0px, 0px, 1536px, 0px); } 
     to { clip: rect(0px, 2048px, 1536px, 0px); } 
} 

.superClip.out.reverse { 
     clip: rect(0px, 2048px, 1536px, 2048px); 
    -webkit-animation-name: superClipOutLeftRev; 
} 
@-webkit-keyframes superClipOutLeftRev { 
    from {clip: rect(0px, 2048px, 1536px, 0px); } 
    to { clip: rect(0px, 2048px, 1536px, 2048px); } 
}