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。 事件，如果它不是渴望效果，我明白，我需要設置我想要動畫的默認值。 謝謝你的例子。 –