スライドのタイミングでコンテンツが1回だけアニメーションするスライダーを作成したいです

概要

jQueryプラグイン「Swiper」を用いてスライドのタイミングでコンテンツが１回だけアニメーションするようにしたいです。
cssでanimation-fill-modeを使うのかなと思ってやってみたんですが、上手くいかず手詰まりの状況です。
理想の動きとしては、一度見たコンテンツはアニメーションしないようにしたいです。
ソースコードは以下になります。

該当するコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
7
8  <meta name="robots" content="noindex, nofollow">
9
10  <title>Swiper サンプル</title>
11
12  <meta name="description" content="">
13  <meta name="keywords" content="">
14
15  <link rel="stylesheet" href="./css/highlight.js.css">
16  <link rel="stylesheet" href="./css/swiper.min.css">
17  <link rel="stylesheet" href="./css/style.css">
18  <link rel="stylesheet" href="./css/sample.css">
19  <link rel="stylesheet" href="./css/sample04.css">
20
21  <script src="./js/highlight.js"></script>
22  <script src="./js/highlightjs-line-numbers.min.js"></script>
23  <script src="./js/swiper.min.js"></script>
24  <script src="./js/script.js"></script>
25
26</head>
27<body>
28<div class="l-wrapper">
29  <header class="l-header">
30    <div class="l-header-inner c-container">
31      <div class="l-header-logo">Swiper サンプル</div>
32    </div><!-- .l-header-inner -->
33  </header><!-- .l-header -->
34
35  <div class="c-container">
36    <div class="sample sample04">
37      <div class="swiper-container">
38        <div class="swiper-wrapper">
39          <div class="swiper-slide">
40            <p class="catch01">わたくしといふ現象は</p>
41          </div>
42          <div class="swiper-slide">
43            <p class="catch02">仮定された有機交流電燈の</p>
44          </div>
45          <div class="swiper-slide">
46            <p class="catch03">ひとつの青い照明です</p>
47          </div>
48        </div>
49          
50        <div class="swiper-button-prev"></div>
51        <div class="swiper-button-next"></div>
52
53        <div class="swiper-pagination"></div>
54      </div>
55    </div>
56</body>
57</html>

css
1@charset 'utf-8';
2
3.sample {
4  margin-bottom: 30px;
5  padding: 15px;
6  border: 1px solid #ddd;
7  border-radius: 3px;
8}
9
10@media (min-width: 768px) {
11  .sample {
12    padding: 20px;
13  }
14}
15.sample04 .swiper-slide {
16  cursor: pointer;
17}
18
19.sample04 .swiper-slide {
20  height: 200px;
21  display: flex;
22  justify-content: center;
23}
24
25.sample04 .swiper-slide p {
26  display: flex;
27  align-items: center;
28  opacity: 0;
29  transform: translateY(10px);
30}
31
32.sample04 .swiper-slide .is-anim {
33  transition: .6s cubic-bezier(0.23, 1, 0.32, 1);
34  opacity: 1;
35  transform: translateY(0px);
36  animation-fill-mode: forwards;
37}
38
39.sample04 .swiper-button-prev,
40.sample04 .swiper-button-next {
41  display: none;
42}
43
44@media (min-width: 768px) {
45  .sample04 .swiper-button-prev,
46  .sample04 .swiper-button-next {
47    display: block;
48  }
49}

javascript
1/**
2 * highlight.js
3 */
4window.addEventListener('DOMContentLoaded', function() {
5  [].forEach.call(document.querySelectorAll('pre > code'), function(elem) {
6    elem.textContent = elem.textContent.replace(/^[\r\n]+|[\r\n]+$/g, '');
7
8    hljs.highlightBlock(elem);
9    hljs.lineNumbersBlock(elem);
10  });
11}, false);
12
13/**
14 * swiper.js
15 */
16// sample04
17var swiper04Anim = function() {
18  var el = document.querySelector('.sample04 .swiper-slide-active p');
19  var anim = document.querySelectorAll('.is-anim');
20
21  for (var i = 0; i < anim.length; i++ ) {
22    anim[i].classList.remove('is-anim');
23  }
24  el.classList.add('is-anim');
25};
26
27window.addEventListener('DOMContentLoaded', function() {
28  var swiper04 = new Swiper('.sample04 .swiper-container', {
29    pagination: '.swiper-pagination',
30    paginationClickable: true,
31    nextButton: '.swiper-button-next',
32    prevButton: '.swiper-button-prev',
33    loop: true,
34    onInit: function(i) {
35      swiper04Anim();
36    },
37    onSlideChangeEnd: function(i) {
38      swiper04Anim();
39    }
40  });
41}, false);

自分で考えてやってみましたが、手詰まりだったため質問させていただきました。

Lhankor_Mhy

2020/05/27 07:32

現状は複数回アニメーションする、ということですか？

Matt007

2020/05/27 07:43

ご質問ありがとうございます。現状はボタンやページネーションをクリックするたびにアニメーションしてしまいます。一度見たコンテンツはアニメーションしないようにしたいです。

Lhankor_Mhy

2020/05/27 07:49

>一度見たコンテンツはアニメーションしないようにしたいなるほど、理解しました。質問本文に追加した方がいいかもしれません。 swiper って、ダミー要素がある仕様だったような気がしますので、DOMに印をつける方法はうまくないかもしれません。ちょっと調べてみます。

Matt007

2020/05/27 07:58

ありがとうございます。もう一度swiperの公式サイト確認してみます。

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

回答2件

下のコードが参考になるかもしれません。

Javascript
1window.addEventListener(
2    "DOMContentLoaded",
3    function () {
4        var indexes = [];
5        var mySwiper = new Swiper(".swiper-container", {
6            loop: true,
7            pagination: {
8                el: ".swiper-pagination",
9            },
10            navigation: {
11                nextEl: ".swiper-button-next",
12                prevEl: ".swiper-button-prev",
13            },
14            //https://swiperjs.com/api/#events
15            on: {
16                init: function () {
17                    console.log("swiper起動。");
18                },
19                //スライドが終わった時のイベント
20                slideChangeTransitionEnd: function () {
21                    var anim = document.querySelectorAll(".is-anim");
22                    for (var i = 0; i < anim.length; i++) {
23                        anim[i].classList.remove("is-anim");
24                    }
25                    var el = document.querySelector(".sample04 .swiper-slide-active p");
26                    //スライドのインデックスが取得できます。0,1,2など
27                    var index = this.realIndex;
28                    //既にスライドされている場合
29                    if (indexes.indexOf(index) >= 0) {
30                        el.classList.add("is-not-anim");
31                    }
32                    //初めてのスライドの場合
33                    else {
34                        el.classList.add("is-anim");
35                        indexes.push(index);
36                    }
37                },
38            },
39        });
40    },
41    false
42);
43

投稿2020/05/28 00:35

fake_shibe

総合スコア806

自己解決

javascript
1var anim = document.querySelectorAll('.is-anim');
2
3  for (var i = 0; i < anim.length; i++ ) {
4    anim[i].classList.remove('is-anim');
5  }