0
オーバーフローが隠されたラッパーの中に絶対的に配置された複数の画面があります。jQueryトグルクラスでCSSトランジションが動作しません
各画面内のリンクをクリックすると、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>感謝。
Humここで不透明度をアニメートすると、クラスがググルド。 イベントそれは欲望の効果ではない、私は私がアニメーション化したいもののデフォルト値を設定する必要があることをunderstant。 ありがとうございます。 –