CSSで「step1⇔step2」のように、左右にスライドできるボックスを作りたい

前提・実現したいこと

CSSで「step1⇔step2」のように、左右にスライドできるボックスを作りたいのですが、片方だけを表示する方法に苦戦しています。

発生している問題

初期表示の状態が問題です。
step2は、step1の「next」をクリックするまで表示したくないのですが、その方法が思いつけません。

尚、初期表示から１回でも「next」などクリックすれば、それ以降は正常に左右にスライドできています。

該当のソースコード

以下を実行：https://codepen.io/miimin/pen/gOGwaVa

html
1<body>
2  <div class="modal">
3    <div class="box step1">
4      <div class="contents">
5        <p>人間のだれもが、究極においては生きなければならない孤独と隣あわせで、人それぞれ自分自身の孤独を確立しないかぎり、人生は始まらないということを、すくなくとも私は、ながいこと理解できないでいた。</p>
6        <button type="button" data-slide_type="next">next</button>
7      </div>
8    </div>
9    <div class="box step2">
10      <div class="contents">
11        <p>星です。わたしの最初の記憶は、流れる星なのです。</p>
12        <button type="button" data-slide_type="prev">prev</button>
13      </div>
14    </div>
15  </div>
16</body>

css
1.modal {
2  position: fixed;
3  inset: 0 0 0 0;
4  background: rgba(0,0,0,0.8);
5  display: flex;
6  justify-content: center;
7  align-items: center;
8  z-index: 10;
9}
10
11.box {
12  background: #99CCCC;
13  display: flex;
14  justify-content: center;
15  align-items: center;
16  padding: 10px;
17  position: absolute;
18  width: 500px;
19  max-width: 90%;
20}
21
22/* 右へスライドアウト */
23.animate_fadeOutRightBig {
24  -webkit-animation-duration: .5s;
25  animation-duration: .5s;		
26  -webkit-animation-fill-mode: both;
27  animation-fill-mode: both;		
28  -webkit-animation-name: fadeOutRightBig;
29  animation-name: fadeOutRightBig;
30}
31@-webkit-keyframes fadeOutRightBig {
32  from {
33    opacity: 1;
34  }
35
36  to {
37    opacity: 0;
38    -webkit-transform: translate3d(2000px, 0, 0);
39    transform: translate3d(2000px, 0, 0);
40  }
41}
42@keyframes fadeOutRightBig {
43  from {
44    opacity: 1;
45  }
46
47  to {
48    opacity: 0;
49    -webkit-transform: translate3d(2000px, 0, 0);
50    transform: translate3d(2000px, 0, 0);
51  }
52}
53
54/* 右からスライドイン */
55.animate_fadeInRightBig {
56  -webkit-animation-duration: .5s;
57  animation-duration: .5s;		
58  -webkit-animation-fill-mode: both;
59  animation-fill-mode: both;	
60  -webkit-animation-name: fadeInRightBig;
61  animation-name: fadeInRightBig;
62}
63@-webkit-keyframes fadeInRightBig {
64  from {
65    opacity: 0;
66    -webkit-transform: translate3d(2000px, 0, 0);
67    transform: translate3d(2000px, 0, 0);
68  }
69
70  to {
71    opacity: 1;
72    -webkit-transform: translate3d(0, 0, 0);
73    transform: translate3d(0, 0, 0);
74  }
75}
76@keyframes fadeInRightBig {
77  from {
78    opacity: 0;
79    -webkit-transform: translate3d(2000px, 0, 0);
80    transform: translate3d(2000px, 0, 0);
81  }
82
83  to {
84    opacity: 1;
85    -webkit-transform: translate3d(0, 0, 0);
86    transform: translate3d(0, 0, 0);
87  }
88}
89
90/* 左へスライドアウド */
91.animate_fadeOutLeftBig {
92  -webkit-animation-duration: .5s;
93  animation-duration: .5s;		
94  -webkit-animation-fill-mode: both;
95  animation-fill-mode: both;		
96  -webkit-animation-name: fadeOutLeftBig;
97  animation-name: fadeOutLeftBig;
98}
99@-webkit-keyframes fadeOutLeftBig {
100  from {
101    opacity: 1;
102  }
103
104  to {
105    opacity: 0;
106    -webkit-transform: translate3d(-2000px, 0, 0);
107    transform: translate3d(-2000px, 0, 0);
108  }
109}
110@keyframes fadeOutLeftBig {
111  from {
112    opacity: 1;
113  }
114
115  to {
116    opacity: 0;
117    -webkit-transform: translate3d(-2000px, 0, 0);
118    transform: translate3d(-2000px, 0, 0);
119  }
120}
121
122/* 左からスライドイン */
123.animate_fadeInLeftBig {
124  -webkit-animation-duration: .5s;
125  animation-duration: .5s;		
126  -webkit-animation-fill-mode: both;
127  animation-fill-mode: both;		
128  -webkit-animation-name: fadeInLeftBig;
129  animation-name: fadeInLeftBig;
130}
131@-webkit-keyframes fadeInLeftBig {
132  from {
133    opacity: 0;
134    -webkit-transform: translate3d(-2000px, 0, 0);
135    transform: translate3d(-2000px, 0, 0);
136  }
137
138  to {
139    opacity: 1;
140    -webkit-transform: translate3d(0, 0, 0);
141    transform: translate3d(0, 0, 0);
142  }
143}
144@keyframes fadeInLeftBig {
145  from {
146    opacity: 0;
147    -webkit-transform: translate3d(-2000px, 0, 0);
148    transform: translate3d(-2000px, 0, 0);
149  }
150
151  to {
152    opacity: 1;
153    -webkit-transform: translate3d(0, 0, 0);
154    transform: translate3d(0, 0, 0);
155  }
156}

js
1$(document).on("click","[data-slide_type]", function(){			
2  const slide_type = $(this).data("slide_type");
3  if ( slide_type === 'next' ) {
4    // .step1 を左へスライドアウト
5    $('.step1').removeClass('animate_fadeInLeftBig');
6    $('.step1').addClass('animate_fadeOutLeftBig');		
7    // .step2 を右からスライドイン
8    $('.step2').removeClass('animate_fadeOutRightBig');	
9    $('.step2').addClass('animate_fadeInRightBig');	
10  }
11  else if ( slide_type === 'prev' ) {
12    // .step2 を右へスライドアウト
13    $('.step2').removeClass('animate_fadeInRightBig');	
14    $('.step2').addClass('animate_fadeOutRightBig');	
15    // .step1 を左からスライドイン
16    $('.step1').removeClass('animate_fadeOutLeftBig');		
17    $('.step1').addClass('animate_fadeInLeftBig');
18  }
19});

試したこと

step2のHTMLにスライドアウトのクラス付与を試みました。
つまり<div class="box step2">を<div class="box step2 animate_fadeOutRightBig">です。
しかし初期表示において一瞬だけstep2が表示され、スライドアウトしていくのが見えてしまうために断念しました。

次にstep2に次のCSSの追加を試みました。

css
1.step2 {
2    -webkit-transform: translate3d(2000px, 0, 0);
3    transform: translate3d(2000px, 0, 0);  
4}

これは初期表示の問題を解決しましたが、「prev」クリックの際にスライドせずパッと切り替わってしまうという新たな問題が生じてしまいました。

行動規範の内容に同意します

回答1件

ベストアンサー

初期状態のときは非表示にしておけばいいでしょう。
下記のCSSを追加してみてください。

css
1.step2:not(.animate_fadeOutRightBig) {
2  opacity: 0;
3  -webkit-transform: translate3d(2000px, 0, 0);
4  transform: translate3d(2000px, 0, 0);
5}

おまけ

今回のような単純なアニメーションなら、transitionを使った方が、はるかにシンプルに記述できます。

html
1    <div class="box step1 fadeIn"> 
2        略
3    </div>
4    <div class="box step2">
5        略
6    </div>

css
1.step1 {
2  opacity: 0;
3  -webkit-transform: translate3d(-2000px, 0, 0);
4  transform: translate3d(-2000px, 0, 0);
5  transition: .5s;
6}
7.step2 {
8  opacity: 0;
9  -webkit-transform: translate3d(2000px, 0, 0);
10  transform: translate3d(2000px, 0, 0);
11  transition: .5s;
12}
13/* スライドイン */
14.fadeIn {
15  opacity: 1;
16  -webkit-transform: translate3d(0, 0, 0);
17  transform: translate3d(0, 0, 0);
18}

js
1$(document).on("click","[data-slide_type]", function(){			
2    $('.step1').toggleClass('fadeIn');		
3    $('.step2').toggleClass('fadeIn');	
4});