Vue 구성 요소 회전 목마 애니메이션 구현
원본 코드 는 아래 와 같다.
<template>
<div id="wrapper">
<transition-group name="list" tag="ul" mode="out-in">
<li v-for="(item,index) in piclist" :key="item.url" :style="config[index]">
<img :src="item.url">
</li>
</transition-group>
<a href="javascript:;" id="arrLeft" class="prev" @click="turnleft"></a>
<a href="javascript:;" id="arrRight" class="next" @click="turnright"></a>
</div>
</template>
js:
export default {
data() {
return {
piclist: [
{ url: require("../image/pic1.png") },
{ url: require("../image/pic2.png") },
{ url: require("../image/pic3.png") }
],
//
config: [
{
position: "absolute",
width: "400px",
top: "20px",
left: "50px",
opacity: 0.2,
zIndex: 2,
transition: "1s"
},
{
position: "absolute",
width: "800px",
top: "100px",
left: "200px",
opacity: 1,
zIndex: 4,
transition: "1s"
},
{
position: "absolute",
width: "400px",
top: "20px",
left: "750px",
opacity: 0.2,
zIndex: 2,
transition: "1s"
}
],
previous: 0,
now: Date.now()
};
},
methods: {
// ,
turnleft: function() {
this.now = Date.now();
if (this.now - this.previous > 1000) {
this.config.push(this.config.shift());
this.previous = this.now;
}
},
turnright: function() {
this.now = Date.now();
if (this.now - this.previous > 1000) {
this.config.unshift(this.config.pop());
this.previous = this.now;
}
}
}
};
css:
* {
margin: 0;
padding: 0;
}
#wrapper {
margin: auto;
height: 500px;
width: 79%;
position: relative;
}
ul {
list-style: none;
}
li img {
height: 500px;
width: 100%;
}
.prev,
.next {
position: absolute;
height: 60px;
width: 60px;
border-radius: 50%;
top: 50%;
margin-top: -56px;
overflow: hidden;
text-decoration: none;
background-color: aqua;
z-index: 5;
opacity: 1;
}
.prev {
left: 0;
}
.next {
right: 0;
}
.picleft {
width: 400;
top: 20;
left: 50;
opacity: 0.2;
z-index: 2;
}
.piccenter {
width: 800;
top: 100;
left: 200;
opacity: 1;
z-index: 4;
}
.picright {
width: 400;
top: 20;
left: 750;
opacity: 0.2;
z-index: 2;
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.