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

使用-webkit-mask定制jQuery Mobile转换

1 个答案: