Vue는 휴대폰 번호 복권을 위아래로 스크롤하는 애니메이션 예시 공유를 구현합니다.
이 글에서는 주로 휴대폰 번호 복권의 상하 스크롤 애니메이션을 구현한 Vue의 예시를 소개합니다. 그것은 특정 참조 가치가 있습니다. 관심 있는 친구들이 그것을 참조할 수 있기를 바랍니다.
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/mui.css" rel="external nofollow" />
<style type="text/css">
.in-out-translate-demo-wrapper {
position: relative;
height: 58px;
}
.in-out-translate-demo-wrapper button {
position: absolute;
}
.in-out-translate-fade-enter-active,
.in-out-translate-fade-leave-active {
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
}
.in-out-translate-fade-enter,
.in-out-translate-fade-leave-active {
opacity: 0;
}
.in-out-translate-fade-enter {
transform: translateX(54px);
-webkit-transform: translateX(54px);
-moz-transform: translateX(54px);
-o-transform: translateX(54px);
}
.in-out-translate-fade-leave-active {
transform: translateX(-54px);
-webkit-transform: translateX(-54px);
-moz-transform: translateX(-54px);
-o-transform: translateX(-54px);
}
.down-up-translate-fade-enter-active,
.down-up-translate-fade-leave-active {
transition: all .1s;
-webkit-transition: all .1s;
-moz-transition: all .1s;
-o-transition: all .1s;
}
.down-up-translate-fade-enter,
.down-up-translate-fade-leave-active {
opacity: 1;
}
.down-up-translate-fade-enter {
/*transform: translateY(40px);
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-o-transform: translateY(40px);*/
}
.down-up-translate-fade-leave-active {
transform: translateY(-50px);
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
-o-transform: translateY(-50px);
}
.num {
/*position: relative;*/
width: 100%;
height: 50px;
overflow: hidden;
}
.num .span {
/*position: absolute;*/
background: #0062CC;
color: #fff;
width: 30px;
height: 50px;
line-height: 50px;
font-size: 40px;
font-weight: bold;
float: left;
margin-right: 2px;
}
.num .span p {
background: #0062CC;
color: #fff;
width: 30px;
height: 50px;
line-height: 50px;
font-size: 40px;
font-weight: bold;
}
</style>
</head>
<body>
<p id="demo" class="demo">
<p class="in-out-translate-demo-wrapper mui-text-center">
<transition name="in-out-translate-fade">
<button v-if="show" v-on:click="start" key="start" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">开始</button>
<button v-else key="end" v-on:click="end" type="button" class="mui-btn mui-btn-yellow mui-btn-outlined">结束</button>
</transition>
</p>
<p class="num mui-text-center">
<p class="span">
<p>1</p>
</p>
<p class="span">
<transition name="down-up-translate-fade">
<p :key="i">{{i}}</p>
</transition>
</p>
<p class="span">
<transition name="down-up-translate-fade">
<p :key="j">{{j}}</p>
</transition>
</p>
<p class="span">
<p>*</p>
</p>
<p class="span">
<p>*</p>
</p>
<p class="span">
<p>*</p>
</p>
<p class="span">
<p>*</p>
</p>
<p class="span">
<transition name="down-up-translate-fade">
<p :key="k">{{k}}</p>
</transition>
</p>
<p class="span">
<transition name="down-up-translate-fade">
<p :key="l">{{l}}</p>
</transition>
</p>
<p class="span">
<transition name="down-up-translate-fade">
<p :key="i">{{i}}</p>
</transition>
</p>
<p class="span">
<transition name="down-up-translate-fade">
<p :key="j">{{j}}</p>
</transition>
</p>
</p>
</p>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>-->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
show: true,
i: 0,
j:0,
k: 0,
l: 0,
interval: null
},
methods: {
start: function() {
this.show = !this.show
var _this = this;
if(!this.interval) {
this.interval = setInterval(function() {
_this.i = Math.floor(Math.random() * 10);
_this.j = Math.floor(Math.random() * 10);
_this.k = Math.floor(Math.random() * 10);
_this.l = Math.floor(Math.random() * 10);
}, 10)
}
},
end: function() {
this.show = !this.show
clearInterval(this.interval)
this.interval = null
}
}
})
</script>
</body>관련 권장사항:
PHP가 jQuery 및 Mysql을 사용하여 복권 프로그램을 구현하는 방법에 대한 예
PHP가 복권 확률 계산 알고리즘을 구현하는 방법 공유 예
위 내용은 Vue는 휴대폰 번호 복권을 위아래로 스크롤하는 애니메이션 예시 공유를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7642
15
1392
52
91
11
72
19
33
150
휴대폰 번호가 비어있는 이유는 무엇입니까?
Feb 21, 2023 pm 02:26 PM
휴대전화 번호가 비어 있는 이유: 1. 상대방이 해당 휴대전화 번호를 블랙리스트에 등록한 경우 2. 상대방이 통화 전환 기능을 설정했는데 전송된 번호가 다음과 같은 비정상적인 휴대전화 번호 범위인 경우 11자리를 무작위로 눌렀을 때 3. 잘못된 번호 4. 가상 번호 5. 번호가 취소되어 복구 정지 기간 중입니다. 6. 운영자의 시스템 오류로 인해 사용자의 휴대폰 번호가 비어 있습니다. 7. 신호가 좋지 않습니다. 8. 번호 형식이 잘못되었습니다. 9. 휴대폰 카드 오류.
휴대폰번호에 등록된 내용을 확인하는 방법 '자세한 설명 : 휴대폰번호 등록을 위한 APP조회 방법'
Feb 07, 2024 am 08:24 AM
여러분도 이런 경험이 있으실지 모르겠습니다. 여러분의 휴대폰은 종종 알 수 없는 문자 메시지나 일부 웹사이트의 등록 정보 또는 기타 인증 정보를 수신합니다. 모르시더라도 오늘 제가 여러분과 공유할 내용은 한 번의 클릭으로 익숙하지 않은 모든 웹사이트의 바인딩을 해제하는 방법을 가르치는 것입니다. 1단계: 번호 서비스 플랫폼을 엽니다. 이 기술은 매우 실용적입니다. 단계는 다음과 같습니다. 위챗을 열고 검색창에서 더하기 아이콘을 클릭한 후 친구 추가를 선택한 후 검색할 서비스 플랫폼 코드번호를 입력하세요. 물론 공공기관에 속해 있으며 국립정보통신기술원에서 출시한 번호 서비스 플랫폼이 있다는 것을 알 수 있습니다. 클릭 한 번으로 누구나 휴대전화 번호 정보를 해제할 수 있습니다. 2단계: 휴대전화가 나에게 표시되었는지 확인
에이맵 휴대폰 번호 변경 방법 - 에이맵 휴대폰 번호 변경 방법을 자세히 소개합니다.
Mar 20, 2024 pm 08:41 PM
Amap은 정확한 포지셔닝과 풍부한 기능으로 사용자들에게 사랑받고 있습니다. 다만, 이용과정에서 개인정보 및 서비스의 정확성 확보를 위해 연결휴대폰번호를 변경해야 하는 경우가 있습니다. 그렇다면 Amap의 휴대폰 번호를 변경하는 방법은 무엇입니까? 편집자가 관련 정보를 정리했습니다. 와서 저와 함께 살펴보세요! Amap에서 휴대폰 번호를 변경하는 방법은 무엇입니까? 답변: [AMAP] - [내] - [설정 아이콘] - [계정 및 보안] - [휴대폰 번호] - [변경] - [다음 단계]. 구체적인 단계: 1. 먼저 Amap 소프트웨어를 열고 홈 페이지로 들어갑니다. 오른쪽 하단에 있는 [My]를 클릭해야 합니다. 2. 그런 다음 My One Second에서 몇 가지 관련 기능을 볼 수 있습니다. 코너에 [설정 아이콘]이 있습니다.
휴대폰번호 사용현황은 어떻게 확인하나요? 휴대폰번호 사용시간은 어떻게 확인하나요?
Mar 07, 2024 pm 04:30 PM
이동통신 기술의 지속적인 발전으로 휴대전화 번호는 우리 일상생활에서 없어서는 안 될 커뮤니케이션 도구가 되었습니다. 때로는 해당 휴대폰 번호가 서비스 중단, 연체 여부 등을 확인하는 등 해당 휴대폰 번호의 이용 현황을 확인해야 하는 경우가 있습니다. 1. 휴대폰번호 사용현황은 어떻게 확인하나요? 귀하의 휴대전화번호 사용현황을 확인하는 가장 직접적인 방법은 해당 통신사 고객센터에 문의하시는 것입니다. 운영자마다 문의 방법이 다를 수 있지만 일반적으로 운영자의 고객 서비스 핫라인에 전화하면 됩니다. 고객센터 직원과 통화 시 문의가 필요한 휴대폰 번호만 알려주시면, 고객센터 직원이 자세한 이용현황 정보를 안내해 드립니다. 따라서 특정 휴대폰 번호의 구체적인 상황을 알고 싶다면 해당 통신사의 고객 서비스 핫라인에 전화하여 관련 정보를 얻을 수 있습니다. 있다
QQ 메일함에서 휴대폰 번호 바인딩을 변경하는 방법 - QQ 메일함에서 휴대폰 번호 바인딩을 변경하는 방법
Mar 04, 2024 pm 03:46 PM
많은 친구들이 QQ 메일함에서 휴대폰 번호 바인딩을 변경하는 방법을 모르므로 아래 편집자가 QQ 메일함에서 휴대폰 번호 바인딩을 변경하는 방법을 공유해 보겠습니다. 모두에게 도움이 되십시오. 1단계: 먼저 QQ 메일함을 열고 아래와 같이 위의 설정을 선택합니다. 2단계: 아래와 같이 설정에서 계정 옵션을 선택합니다. 3단계: 아래와 같이 즉시 로그아웃을 선택합니다. 4단계: 로그아웃 후 휴대폰 번호와 이메일 계정 등록을 선택하세요. 5단계: 아래와 같이 나타나는 인터페이스에서 다른 계정을 등록하도록 선택합니다. 6단계: 아래와 같이 안내에 따라 새 휴대폰 번호를 사용하고 문자 메시지를 보냅니다. 7단계: 전송이 완료되면 변경이 성공한 것입니다. 위 내용은 편집자가 가져온 QQ 메일함의 휴대폰 번호 바인딩을 변경하는 방법의 전체 내용입니다.
JavaScript에서 지정된 요소 위치로 스크롤을 구현하는 방법은 무엇입니까?
Oct 22, 2023 am 08:12 AM
JavaScript에서 지정된 요소 위치로 스크롤하는 기능을 구현하는 방법은 무엇입니까? 웹 페이지에서 특정 요소 위치에 사용자의 주의를 집중시켜야 할 때 JavaScript를 사용하여 지정된 요소 위치로 스크롤하는 기능을 구현할 수 있습니다. 이 기사에서는 JavaScript를 통해 이 기능을 구현하는 방법을 소개하고 해당 코드 예제를 제공합니다. 먼저, 대상 요소의 위치 정보를 얻어야 합니다. Element.getBoundingClient를 사용할 수 있습니다.
PHP로 휴대폰 위치 확인하는 방법
Oct 20, 2022 pm 03:00 PM
PHP에서 휴대폰 번호 위치 조회 방법: 1. 휴대폰 번호 위치 조회용 API를 요청합니다. 2. 휴대폰 번호 또는 앞 7자리를 기준으로 휴대폰 번호의 위치 정보를 조회합니다. 3. "function juheHttpRequest($url, $params = false, $ispost = 0){...}" 메소드를 통해 인터페이스에 콘텐츠를 반환하도록 요청합니다.
iframe 스크롤 동작 모니터링
Feb 18, 2024 pm 08:40 PM
iframe의 스크롤을 모니터링하려면 특정 코드 예제가 필요합니다. iframe 태그를 사용하여 웹 페이지에 다른 웹 페이지를 삽입할 때 때때로 iframe의 콘텐츠에 대해 몇 가지 특정 작업을 수행해야 합니다. 일반적인 요구 사항 중 하나는 스크롤이 발생할 때 해당 코드가 실행될 수 있도록 iframe의 스크롤 이벤트를 수신하는 것입니다. 다음에서는 JavaScript를 사용하여 iframe의 스크롤을 모니터링하는 방법을 소개하고 참조용 특정 코드 예제를 제공합니다. iframe 요소를 얻으세요. 먼저, 우리가 필요로 하는 것은
