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>相关推荐：
Atas ialah kandungan terperinci vue实现手机号码抽奖上下滚动动画实例分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Apakah sebab telefon bimbit mempunyai nombor kosong?
Feb 21, 2023 pm 02:26 PM
Sebab mengapa nombor telefon bimbit kosong: 1. Nombor telefon bimbit telah disenaraihitamkan oleh pihak yang satu lagi 2. Pihak yang satu lagi telah menyediakan fungsi pemindahan panggilan, dan nombor yang dipindahkan adalah julat nombor telefon bimbit yang tidak konvensional, seperti sebagai 11 digit ditekan secara rawak; 4. Nombor maya; secara serantau dan pelbagai; 7. Isyarat tidak baik;
Bagaimana untuk menyemak perkara yang didaftarkan dengan nombor telefon bimbit 'Penjelasan terperinci: Kaedah pertanyaan APP untuk pendaftaran nombor telefon bimbit'
Feb 07, 2024 am 08:24 AM
Saya tidak tahu sama ada anda mempunyai pengalaman sedemikian Telefon mudah alih anda sering menerima beberapa mesej teks yang tidak dapat dijelaskan, atau maklumat pendaftaran untuk beberapa tapak web atau maklumat pengesahan lain, nombor telefon mudah alih kami mungkin terikat pada banyak tapak web yang tidak dikenali diri kita Walaupun anda tidak tahu, apa yang saya akan kongsikan dengan anda hari ini adalah untuk mengajar anda cara menyahikat semua tapak web yang tidak dikenali dengan satu klik. Langkah 1: Buka platform perkhidmatan nombor Teknik ini sangat praktikal. Langkah-langkahnya adalah seperti berikut: Buka WeChat, klik ikon tambah dalam kotak carian, pilih Tambah Rakan, dan kemudian masukkan platform perkhidmatan nombor kod untuk mencari. Kita dapat melihat bahawa terdapat platform perkhidmatan nombor Sudah tentu, ia adalah milik institusi awam dan telah dilancarkan oleh Institut Teknologi Maklumat dan Komunikasi Negara Ia boleh membantu semua orang melepaskan maklumat nombor telefon bimbit dengan satu klik. Langkah 2: Semak sama ada telefon telah ditandakan untuk saya
Cara menukar nombor telefon bimbit Amap - Pengenalan terperinci kepada kaedah menukar nombor telefon bimbit Amap
Mar 20, 2024 pm 08:41 PM
Amap disukai oleh pengguna kerana kedudukannya yang tepat dan fungsi yang kaya. Walau bagaimanapun, semasa penggunaan, kadangkala kita mungkin perlu menukar nombor telefon mudah alih yang terikat untuk memastikan ketepatan maklumat dan perkhidmatan peribadi. Jadi, bagaimana untuk menukar nombor telefon bimbit Amap? Editor telah mengumpulkan beberapa maklumat yang berkaitan, datang dan lihat bersama saya! Bagaimana untuk menukar nombor telefon bimbit di Amap? Jawapan: [AMAP] - [Saya] - [Ikon Tetapan] - [Akaun dan Keselamatan] - [Nombor Telefon Mudah Alih] - [Tukar] - [Langkah Seterusnya]. Langkah-langkah khusus: 1. Mula-mula buka perisian Amap dan masukkan halaman utama Kita perlu klik [My] di sudut kanan bawah 2. Kemudian anda boleh melihat beberapa fungsi yang berkaitan di My One Second sudut. [Ikon tetapan] di sudut;
Bagaimana untuk menyemak status penggunaan nombor telefon bimbit? Bagaimana untuk menyemak masa penggunaan nombor telefon bimbit?
Mar 07, 2024 pm 04:30 PM
Dengan kemajuan berterusan teknologi komunikasi mudah alih, nombor telefon mudah alih telah menjadi alat komunikasi yang sangat diperlukan dalam kehidupan seharian kita. Kadangkala, kita perlu menyemak status penggunaan nombor telefon mudah alih tertentu, seperti mengesahkan sama ada nombor itu tidak digunakan atau tertunggak. 1. Bagaimana untuk menyemak status penggunaan nombor telefon bimbit? Menghubungi perkhidmatan pelanggan pengendali ialah cara paling langsung untuk menyemak status penggunaan nombor telefon mudah alih anda. Pengendali yang berbeza mungkin mempunyai kaedah pertanyaan yang berbeza, tetapi ini biasanya boleh dicapai dengan menghubungi talian hotline perkhidmatan pelanggan pengendali. Apabila bercakap dengan kakitangan perkhidmatan pelanggan, anda hanya perlu memberikan nombor telefon mudah alih yang anda perlukan untuk pertanyaan, dan kakitangan perkhidmatan pelanggan akan memberikan anda maklumat status penggunaan yang terperinci. Oleh itu, jika anda ingin mengetahui situasi khusus nombor telefon mudah alih tertentu, anda boleh mendapatkan maklumat yang berkaitan dengan menghubungi talian hotline perkhidmatan pelanggan pengendali. Disana ada
Bagaimana untuk menukar nombor telefon mudah alih yang mengikat dalam peti mel QQ - Bagaimana untuk menukar nombor telefon mudah alih yang mengikat dalam peti mel QQ
Mar 04, 2024 pm 03:46 PM
Ramai rakan tidak tahu cara menukar binding nombor telefon bimbit dalam peti surat QQ, jadi editor di bawah akan berkongsi kaedah menukar nombor telefon bimbit dalam peti surat QQ Jom ikuti editor untuk lihat berguna kepada semua orang. Langkah 1: Mula-mula buka peti mel QQ dan pilih tetapan di atas, seperti yang ditunjukkan di bawah. Langkah 2: Pilih pilihan akaun dalam tetapan, seperti yang ditunjukkan di bawah. Langkah 3: Pilih untuk log keluar serta-merta, seperti yang ditunjukkan di bawah. Langkah 4: Selepas log keluar, pilih untuk mendaftar nombor telefon mudah alih dan akaun e-mel. Langkah 5: Pilih untuk mendaftar akaun lain dalam antara muka yang dipaparkan, seperti yang ditunjukkan di bawah. Langkah 6: Gunakan nombor telefon mudah alih baharu mengikut gesaan dan hantar mesej teks, seperti yang ditunjukkan di bawah. Langkah 7: Selepas penghantaran selesai, perubahan berjaya. Di atas adalah keseluruhan kandungan cara menukar nombor telefon bimbit yang dijilid dalam peti mel QQ yang dibawa oleh editor kepada anda
Bagaimana untuk melaksanakan tatal ke kedudukan elemen tertentu dalam JavaScript?
Oct 22, 2023 am 08:12 AM
Bagaimana untuk melaksanakan fungsi menatal ke kedudukan elemen tertentu dalam JavaScript? Dalam halaman web, apabila kita perlu menumpukan perhatian pengguna kepada kedudukan elemen tertentu, kita boleh menggunakan JavaScript untuk melaksanakan fungsi menatal ke kedudukan elemen yang ditentukan. Artikel ini akan memperkenalkan cara melaksanakan fungsi ini melalui JavaScript dan memberikan contoh kod yang sepadan. Pertama, kita perlu mendapatkan maklumat kedudukan elemen sasaran. Anda boleh menggunakan Element.getBoundingClient
Bagaimana untuk menyemak lokasi nombor telefon bimbit dengan PHP
Oct 20, 2022 pm 03:00 PM
Cara untuk menanyakan lokasi nombor telefon mudah alih dalam PHP: 1. Minta API untuk menanyakan lokasi nombor telefon mudah alih 2. Tanya maklumat lokasi nombor telefon mudah alih berdasarkan nombor telefon bimbit atau 7 digit pertama daripada nombor mudah alih; 3. Melalui kaedah "function juheHttpRequest($url, $params = false, $ispost = 0){...}" meminta antara muka untuk mengembalikan kandungan.
Pantau tingkah laku menatal iframe
Feb 18, 2024 pm 08:40 PM
Cara memantau penatalan iframe memerlukan contoh kod khusus Apabila kami menggunakan teg iframe untuk membenamkan halaman web lain dalam halaman web, kadangkala kami perlu melakukan beberapa operasi khusus pada kandungan dalam iframe. Salah satu keperluan biasa ialah mendengar acara tatal iframe supaya kod yang sepadan boleh dilaksanakan apabila tatal berlaku. Berikut akan memperkenalkan cara menggunakan JavaScript untuk memantau penatalan iframe, dan menyediakan contoh kod khusus untuk rujukan. Dapatkan elemen iframe Pertama, kita perlukan
