1

我正在尝试使用 -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

现在它没有使用自定义动画，只是出现了下一页。

4

1 回答 1

0

所以对于任何想知道的人。我已经离开了 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); }
}
于 2013-08-09T15:45:40.273 回答