我需要覆盖默认的幻灯片效果来溶解效果。
当 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。
使用上述代码,页面转换不流畅。
如何纠正页面过渡以使其流畅运行?
最佳答案
您还需要@keyframes 中的 vendor 前缀:@-webkit-keyframes 等等..
关于javascript - 如何使用 CSS3 功能覆盖 JQuery Mobile 中的幻灯片效果以溶解效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14230107/