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中的供应商前缀：@ -webkit-keyframes等等。

Answer 2

我使用关键帧通过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;
}

请参阅demo。

CSS 上方将为您提供解散效果，并覆盖jQuery Mobile中页面转换的默认幻灯片效果。

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

2 个答案: