Javascript 如何使用CSS3自动覆盖JQuery Mobile中的幻灯片效果以消除效果？

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

调用

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创建了一个

使用上述代码，页面传输不顺畅

---

如何更正页面传输以顺利运行？

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

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

请在CSS中添加

@-webkit关键帧

，

@-moz关键帧

，以及

@-o-关键帧

，就像下面添加的

@关键帧一样

@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中页面传输的默认幻灯片效果。
这不是供应商前缀问题。我已经将其命名为
@-moz关键帧
和
@-webkit关键帧
。这是jquery移动传输问题。