2

我需要覆盖默认的幻灯片效果来溶解效果。

调用函数时changePage，我需要将当前页面慢慢溶解到新页面。

我尝试使用以下 CSS

@keyframes dissolve {
    0% { opacity:1; }
    5% { opacity:0.9;}
    15% { opacity:0.7;}
    25% { opacity:0.5;}
    35% { opacity:0.3;}
    45% { opacity:0;}
    55% { opacity:0.2;}
    65% { opacity:0.4;}
    75% { opacity:0.6;}
    85% { opacity:0.8;}
    95% { opacity:0.9;}
    100% { opacity:1;}
}
.in, .out, .slide.in, .slide.out, .slide.out.reverse, .slide.in.reverse {
    -webkit-animation-name: dissolve;
    -moz-animation-name: dissolve;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 350ms;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-duration: 350ms

}

我用上面的 CSS创建了一个小提琴。

上述代码的页面转换不流畅。

如何纠正页面转换以顺利运行？

4

2 回答 2

0

您还需要@keyframes 中的供应商前缀：@-webkit-keyframes 等等..

于 2013-02-16T21:27:57.133 回答
0

我已经通过 css 使用关键帧并覆盖jQuery Mobile的CSS获得了溶解效果。

请在CSS中添加@-webkit-keyframes、@-moz-keyframes和，如下所示。@-o-keyframes@keyframes

@keyframes dissolve-out {
    0% { opacity: 1; }
    20% { opacity: 0.5; }
    40% { opacity: 0.2; }
    60% { opacity: 0; }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes dissolve-in {
    0% { opacity: 0; }
    20% { opacity: 0; }
    40% { opacity: 0; }
    60% { opacity: 0.2; }
    80% { opacity: 0.6; }
    100% { opacity: 1; }
}

.slideup.in, .slide.in, .slide.in.reverse {
    -webkit-animation: dissolve-in;
    -moz-animation: dissolve-in;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 3s !important;
    -moz-animation-duration:3s !important;
}
.slide.out, .slide.out.reverse {
    -webkit-transform: translateX(0%);
    -webkit-animation: dissolve-out;
    -moz-transform: translateX(0%);
    -moz-animation: dissolve-out;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 3s !important;
    -moz-animation-duration:3s !important;
}

请看演示。

上面的CSS会给你一个溶解效果，覆盖 jQuery Mobile 中页面转换的默认幻灯片效果。

于 2013-02-22T04:22:30.807 回答