Bootstrap 在浏览器中打开后会破坏我的 gif 动画。 Gif 突然停止

Question

我需要打开一个包含四个步骤的弹出式教程。每个步骤都有一个 gif 显示要做什么，点显示进度，文本解释步骤。当用作网页上的幻灯片时，该代码工作得非常好。我将代码放入引导模式以使弹出的东西正常工作。现在，弹出窗口确实有效，但 gif 的行为很奇怪。我观察到它是导致它的引导 CSS，但不知道如何修复它。任何指导将不胜感激。

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var text = document.getElementsByClassName("mytext");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
      text[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  text[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}

/* * {box-sizing: border-box} */
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none; vertical-align: middle;}
img {
  vertical-align: middle;
  width: 100%;
  border: 0;
}
.mytext {
  text-align: center;
  width: 100%
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #DBDBDB;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #33A849;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".cd-example-modal-lg">More In</button>
<div class="modal fade modal-fade cd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="slideshow-container" style="width:50%">
            <div class="mySlides fade">
          <img src="https://media.giphy.com/media/Y3AbrXYYwtHHChK00a/giphy.gif" style="height:250px">
                </div>
            <div class="mySlides fade">
          <img src="https://media.giphy.com/media/SXaQdkJxPHGGwXNEeY/giphy.gif" style="height:250px">
                </div>
            <div class="mySlides fade">
          <img src="https://media.giphy.com/media/WmiuaNK5ARbSIld4Y0/giphy.gif" style="height:250px">
                </div>
            <div class="mySlides fade">
          <img src="https://media.giphy.com/media/SVaJz9DQfv0xLXPSHm/giphy.gif" style="height:250px">
                </div>
            <div style="text-align:center">
                    <span class="dot" onclick="currentSlide(1)"></span>
                    <span class="dot" onclick="currentSlide(2)"></span>
                    <span class="dot" onclick="currentSlide(3)"></span>
                    <span class="dot" onclick="currentSlide(4)"></span>
            </div>
            <div class="mytext">
                    <p>Step 1: Analyse Students’ Data</p>
                    <p>Select ‘Assessed Level’ to view data based on your students’ current level.</p>
                    <p>To see where your students sit in relation to their grade, select ‘Grade’.</p>
            </div>
            <div class="mytext">
                    <p>Step 2: Select Individual Cells for Goal Sheets</p>
                    <p>Select the skills you want your students to develop by clicking on the individual cells.  Skills highlighted in light or dark orange indicate students are working below their assessed level for these skills.  These are ‘growth opportunities’, so you may want to generate goals sheets for these particular skills. </p>
            </div>
            <div class="mytext">
                    <p>Step 3: Generate all Goal Sheets</p>
                    <p>To generate all the student goal sheets as one PDF document, click on ‘Generate all Goal Sheets'. </p>
            </div>
            <div class="mytext">
          <p>Step 4: (Optional) Generate Individual Goal Sheets</p>
                <p>To generate individual student goal sheets, click on the download button next to the student’s name. This will enable you to print or email goal sheets for individual students. </p>
          </div>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Answer 1

从您的 modal 中删除 fade 类

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var text = document.getElementsByClassName("mytext");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
      text[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  text[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}

/* * {box-sizing: border-box} */
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none; vertical-align: middle;}
img {
  vertical-align: middle;
  width: 100%;
  border: 0;
}
.mytext {
  text-align: center;
  width: 100%
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #DBDBDB;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #33A849;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".cd-example-modal-lg">More In</button>
<div class="modal fade modal-fade cd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="slideshow-container" style="width:50%">
            <div class="mySlides">
          <img src="https://media.giphy.com/media/Y3AbrXYYwtHHChK00a/giphy.gif" style="height:250px">
                </div>
            <div class="mySlides">
          <img src="https://media.giphy.com/media/SXaQdkJxPHGGwXNEeY/giphy.gif" style="height:250px">
                </div>
            <div class="mySlides">
          <img src="https://media.giphy.com/media/WmiuaNK5ARbSIld4Y0/giphy.gif" style="height:250px">
                </div>
            <div class="mySlides">
          <img src="https://media.giphy.com/media/SVaJz9DQfv0xLXPSHm/giphy.gif" style="height:250px">
                </div>
            <div style="text-align:center">
                    <span class="dot" onclick="currentSlide(1)"></span>
                    <span class="dot" onclick="currentSlide(2)"></span>
                    <span class="dot" onclick="currentSlide(3)"></span>
                    <span class="dot" onclick="currentSlide(4)"></span>
            </div>
            <div class="mytext">
                    <p>Step 1: Analyse Students’ Data</p>
                    <p>Select ‘Assessed Level’ to view data based on your students’ current level.</p>
                    <p>To see where your students sit in relation to their grade, select ‘Grade’.</p>
            </div>
            <div class="mytext">
                    <p>Step 2: Select Individual Cells for Goal Sheets</p>
                    <p>Select the skills you want your students to develop by clicking on the individual cells.  Skills highlighted in light or dark orange indicate students are working below their assessed level for these skills.  These are ‘growth opportunities’, so you may want to generate goals sheets for these particular skills. </p>
            </div>
            <div class="mytext">
                    <p>Step 3: Generate all Goal Sheets</p>
                    <p>To generate all the student goal sheets as one PDF document, click on ‘Generate all Goal Sheets'. </p>
            </div>
            <div class="mytext">
          <p>Step 4: (Optional) Generate Individual Goal Sheets</p>
                <p>To generate individual student goal sheets, click on the download button next to the student’s name. This will enable you to print or email goal sheets for individual students. </p>
          </div>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>