如何在加载页面后立即启动动画?
how to start the animation immediately after loading the page?
示例: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>`;
}
});
问题是当滑动事件发生时会出现圆形动画(将 '.swiper-pagination-bullet-active' class 改为 .swiper-pagination-bullet
)。
第一个 .swiper-pagination-bullet
在您进入页面时已经有那个 class。
为了解决这个问题,我想到的一个解决方案是在第一个圆圈上使用 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>
示例: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>`;
}
});
问题是当滑动事件发生时会出现圆形动画(将 '.swiper-pagination-bullet-active' class 改为 .swiper-pagination-bullet
)。
第一个 .swiper-pagination-bullet
在您进入页面时已经有那个 class。
为了解决这个问题,我想到的一个解决方案是在第一个圆圈上使用 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>