Question

示例：https://codepen.io/pseudop/pen/Xedbam

在示例中，在页面加载时，第一个圆圈不会设置动画，但是，一旦它循环播放

HTML

<div class="swiper-container">

<div class="swiper-wrapper">

<div class="swiper-slide">Slide 1 <p>123.</p></div>
<div class="swiper-slide">Slide 2 <p>321.</p></div>
<div class="swiper-slide">Slide 3 <p>123</p></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

CSS

/* svg style */
.circ {transform: rotate(-90deg);}
.circ circle {stroke-dasharray: 440px;}
.circ1 {stroke-dashoffset: 440px;}

/* overwrite swiper */
.swiper-slide {height: 200px;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 40px;}
.swiper-pagination-bullet {background: 0;}
.swiper-pagination-bullet-active .circ1 {stroke-dashoffset: 220px; transition: linear 2s stroke-dashoffset; transform: scale(1);}
.swiper-button-prev, .swiper-button-next {display: none;}

JS

var mySwiper = new Swiper ('.swiper-container', {
    loop: true,
    speed: 600,
    autoplay: 1400,
    pagination: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    // add SVG in bullets
    paginationBulletRender: function (swiper, index, className) {
        return `<span class="${className}"><svg class="circ" width="90" height="90" class="circ">
                <circle class="circ1" cx="46" cy="46" r="33" stroke="#FF964C" stroke-width="3" fill="none"/>
                <circle class="circ2" cx="46" cy="46" r="33" stroke="#7F3400" stroke-width="1" fill="none"/>
                </svg></span>`;
    }
});

Answer 1

问题是当发生滑动事件时会发生圆圈动画（将{.swiper-pagination-bullet-active＆＃39; class赋予.swiper-pagination-bullet）。

当您进入页面时，第一个.swiper-pagination-bullet已经拥有该类。

要解决这个问题，我想出的一个解决方案是在第一个圆圈上使用CSS动画。动画的持续时间等于您进入页面和第二个文本滑动之间的延迟。（我已经从自动播放1400中放了1.4秒，但您可以根据需要更改它）。您还可以使用更多参数自定义css动画。

请参阅下面的代码段或CodePen

＆＃13;

var mySwiper = new Swiper ('.swiper-container', {
loop: true,
speed: 600,
autoplay: 1400,
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// add SVG in bullets
paginationBulletRender: function (swiper, index, className) {
return `<span class="${className} active"><svg class="circ" width="90" height="90" class="circ">
<circle class="circ1" cx="46" cy="46" r="33" stroke="#FF964C" stroke-width="3" fill="none"/>
<circle class="circ2" cx="46" cy="46" r="33" stroke="#7F3400" stroke-width="1" fill="none"/>
</svg></span>`;
}
});
/*
ref: http://www.iliketofu.eu/
i used a little es6
svg and slider animation isn't synced yet
*/

＆＃13;

/* svg style */

.circ {
  transform: rotate(-90deg);
}

.circ circle {
  stroke-dasharray: 440px;
}

.circ1 {
  stroke-dashoffset: 440px;
}


/* overwrite swiper */

.swiper-slide {
  height: 200px;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 40px;
}

.swiper-pagination-bullet {
  background: 0;
}

.swiper-pagination-bullet-active .circ1 {
  stroke-dashoffset: 220px;
  transition: linear 2s stroke-dashoffset;
  transform: scale(1);
}
.swiper-pagination-bullet:first-child .circ1 {
  animation-name:circ1;
  animation-duration:1.4s;
  
}
.swiper-button-prev,
.swiper-button-next {
  display: none;
}


@keyframes circ1 {
  0% {stroke-dashoffset: 440px;}
  100% {stroke-dashoffset: 220px;}
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

＆＃13;

如何在加载页面后立即启动动画？

1 个答案: