如何在加載頁面后立即啟動動畫？

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'類賦予.swiper-pagination-bullet ）。

當你進入頁面時，第一個.swiper-pagination-bullet已經有了這個類。

為了解決這個問題，我提出的一個解決方案是在第一個圓圈上使用CSS動畫。 動畫的持續時間等於你進入頁面和第二個文本滑動之間的延遲。（我從自動播放1400中放了1.4秒，但你可以按照你想要的方式改變它）。 您還可以使用更多參數自定義css動畫。

請參閱下面的代碼段或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>