jquery - CSS 过渡不适用于 jQuery 切换类

Question

我有多个屏幕绝对定位在包装器内，隐藏了溢出。

当我单击每个屏幕内的链接时，jQuery 会删除目标的定位类，我想在屏幕之间创建从一个屏幕到另一个屏幕的平滑滑动过渡。当前离开屏幕，下一个进入视口(viewport)，从右侧或顶部滑动(取决于下一个屏幕)。

但是 CSS 转换不起作用。它只是从一个屏幕跳到另一个屏幕，而不是平滑过渡

你知道这里出了什么问题吗？

这是 JS fiddle .

还有代码:

function slideScreens(a,t, e) {
	 if(t == 'screen--5'){
	 a.addClass('bottom');
	  $(".is-visible").removeClass("is-visible");
	   $("."+t).addClass("is-visible").removeClass("top");
	 } else {
	  a.addClass('left');
	  $(".is-visible").removeClass("is-visible");
	  $("."+t).addClass("is-visible").removeClass("right");
	 }
};

$(function() {
	$('.screen a').on('click', function(e) {
	 e.preventDefault();
	 var target = $(this).attr('href');
		slideScreens($(this),target, e);
	});
});

.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'>
	<div class='screens'>
		<div class='screen screen--1 is-visible'>
			screen--1
			<a href="screen--2">to screen 2</a>
		</div>
		<div class='screen screen--2 right'>
			screen--2
				<a href="screen--3">to screen 3</a>
				<a href="screen--5">show screen 5</a>
		</div>
		<div class='screen screen--3 right'>
			screen--3
				<a href="screen--4">to screen 4</a>
		</div>
		<div class='screen screen--4 right'>
			screen--4
		</div>
		<div class='screen screen--5 top'>
			screen--5
		</div>
	</div>
</section>

感谢您的帮助。

Answer 1

我已将 .screen 不透明度设置为 0，并将 .is-visible 类添加到您的样式表中，如下所示:

.is-visible {
  opacity: 1;
}

function slideScreens(a,t, e) {
	 if(t == 'screen--5'){
	 a.addClass('bottom');
	  $(".is-visible").removeClass("is-visible");
	   $("."+t).addClass("is-visible").removeClass("top");
	 } else {
	  a.addClass('left');
	  $(".is-visible").removeClass("is-visible");
	  $("."+t).addClass("is-visible").removeClass("right");
	 }
};

$(function() {
	$('.screen a').on('click', function(e) {
	 e.preventDefault();
	 var target = $(this).attr('href');
		slideScreens($(this),target, e);
	});
});

.wrapper__banner {
  width: 100%;
  height: 400px;
  overflow: hidden;
  border: 2px solid black; }

.screens {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; }

.screen {
  opacity: 0;
  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%; }

.is-visible {
  opacity: 1;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<section class='wrapper__banner'>
			<div class='screens'>
				<div class='screen screen--1 is-visible'>
					screen--1
					<a href="screen--2">to screen 2</a>
				</div>
				<div class='screen screen--2 right'>
					screen--2
						<a href="screen--3">to screen 3</a>
						<a href="screen--5">show screen 5</a>
				</div>
				<div class='screen screen--3 right'>
					screen--3
						<a href="screen--4">to screen 4</a>
				</div>
				<div class='screen screen--4 right'>
					screen--4
				</div>
				<div class='screen screen--5 top'>
					screen--5
				</div>
			</div>
</section>