javascript - 如何使用 CSS3 功能覆盖 JQuery Mobile 中的幻灯片效果以溶解效果？

Question

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

当 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

}

我创建了一个 fiddle上面的CSS。

使用上述代码，页面转换不流畅。

如何纠正页面过渡以使其流畅运行？

Answer 1

您还需要@keyframes 中的 vendor 前缀:@-webkit-keyframes 等等..