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

Question

Example: https://codepen.io/pseudop/pen/Xedbam

In the example, on page load, the first circle doesn't animate, however, it does once it loops around

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

The problem is that the circle animation happens when a swipe event occurs ( giving '.swiper-pagination-bullet-active' class to .swiper-pagination-bullet ).

The first .swiper-pagination-bullet already has that class when you enter the page.

To solve this, one solution i came up with is to use CSS animations on the first circle. The duration of the animation equal to the delay between when you enter the page and when the second text swipes in. ( i've put 1.4s from autoplay 1400 but you can change it how you want ). Also you can customize your css animation with more parameters.

See snippet below or CodePen

 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 */ 

 /* 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;} } 

 <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>