0
我有绝对定位在一个隐藏溢出的包装内的多个屏幕。CSS转换不工作在jQuery切换类
当我点击每个屏幕里面的链接，jQuery的删除目标的定位类，我想创建屏幕之间从一个屏幕到另一个顺利幻灯片过渡。当前屏幕熄灭，下一个进入视口，从右侧或顶部滑动（取决于下一个屏幕）。
但CSS转换不起作用。它只是从一个屏幕跳到另一个，而不是一个平滑过渡
你知道这里有什么问题？
这是JS fiddle。
，代码：
function slideScreens(a,t, e) {
\t if(t == 'screen--5'){
\t a.addClass('bottom');
\t $(".is-visible").removeClass("is-visible");
\t $("."+t).addClass("is-visible").removeClass("top");
\t } else {
\t a.addClass('left');
\t $(".is-visible").removeClass("is-visible");
\t $("."+t).addClass("is-visible").removeClass("right");
\t }
};
$(function() {
\t $('.screen a').on('click', function(e) {
\t e.preventDefault();
\t var target = $(this).attr('href');
\t \t slideScreens($(this),target, e);
\t });
});.wrapper__banner {
width: 100%;
height: 400px;
overflow: hidden;
border: 2px solid black; }
.screens {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 100%; }
.screen {
position: absolute;
width: 100%;
height: 100%; }
.screen--1 {
background: red; }
.screen--2 {
background: lightblue; }
.screen--3 {
background: green; }
.screen--4 {
background: pink; }
.screen--5 {
background: grey; }
.screen {
padding: 10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease; }
.screen.right {
left: 100%; }
.screen.left {
right: 100%; }
.screen.top {
bottom: 100%; }
.screen.bottom {
top: 100%; }<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<section class='wrapper__banner'>
\t <div class='screens'>
\t \t <div class='screen screen--1 is-visible'>
\t \t \t screen--1
\t \t \t <a href="screen--2">to screen 2</a>
\t \t </div>
\t \t <div class='screen screen--2 right'>
\t \t \t screen--2
\t \t \t \t <a href="screen--3">to screen 3</a>
\t \t \t \t <a href="screen--5">show screen 5</a>
\t \t </div>
\t \t <div class='screen screen--3 right'>
\t \t \t screen--3
\t \t \t \t <a href="screen--4">to screen 4</a>
\t \t </div>
\t \t <div class='screen screen--4 right'>
\t \t \t screen--4
\t \t </div>
\t \t <div class='screen screen--5 top'>
\t \t \t screen--5
\t \t </div>
\t </div>
</section>感谢您的帮助。
嗡嗡声好吧，当你的课程是ggled。 事件，如果它不是渴望效果，我明白，我需要设置我想要动画的默认值。 谢谢你的例子。 –