페이지를로드 한 직후에 애니메이션을 시작하는 방법은 무엇입니까?

Question

예 :이 약

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 루프되면 예에서 https://codepen.io/pseudop/pen/Xedbam

는 페이지로드, 최초의 원은 그러나, 그것은하지, 애니메이션하지 않습니다

/* 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에 '.swiper - 페이징 탄환 활성 "등급을 부여)이 발생한다는 것이다.

첫 번째 .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>