Cara menggunakan animasi senarai Vue3 dan animasi negeri-View.js-php.cn

Cara menggunakan animasi senarai Vue3 dan animasi negeri

王林

Lepaskan： 2023-05-22 09:43:19

ke hadapan

1364 orang telah melayarinya

Ikhtisar

Animasi senarai dan animasi status ialah kedua-dua cara untuk meningkatkan pengalaman pengguna Apabila menambah atau mengalih keluar data daripada senarai, jika anda menambahkannya secara langsung. Paparan mengejut agak mendadak, dan pengguna mungkin tidak tahu bahawa data telah ditambahkan pada masa ini Perkara yang sama berlaku untuk mengalih keluar data daripada senarai Pengguna mungkin tidak tahu bahagian data yang telah dialih keluar. Animasi yang menarik adalah sangat menarik dan boleh membantu pengguna memberi perhatian kepada data baharu dan dialih keluar, jadi menambahkan animasi boleh meningkatkan pengalaman pengguna. Ini ialah animasi senarai, dan animasi negeri merujuk kepada perubahan dari satu keadaan ke keadaan yang lain Jika anda menukarnya secara langsung, ia akan kelihatan kaku, tetapi ia akan menjadi lebih baik jika anda menambah animasi kepada peralihan secara perlahan.

Analisis contoh

Animasi senarai

Cara menggunakan animasi senarai Vue3 dan animasi negeri

Seperti yang ditunjukkan dalam gambar di atas, kami ingin memaparkan senarai nombor butang di sebelah kanan, klik Butang akan melakukan animasi untuk menambah bilangan. Kodnya adalah seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表动画</title>
    <style>
        .list-item{
            display: inline-block;
            margin-right: 10px;
        }
        .v-enter-from{
            opacity: 0;
            transform: translateY(30px);
        }
        .v-enter-active{
            transition: all 1s ease-in;
        }
        .v-enter-to{
            opacity: 1;
            transform: translateY(0px);
        }
        .v-move{
            transition: 2.5s ease-in;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
 const app = Vue.createApp({
        data() {
            return {
               list:[1,2,3]
            }
        },
        methods: {
            handleClick(){
               this.list.unshift(this.list.length+1);
            }
        },
        template: 
        `
            <div>
                <transition-group>
                <span class="list-item" v-for = "item in list" :key="item">{{item}}</span>
                </transition-group>
                <button @click="handleClick">add</button> 
            </div>
        `
    });
    const vm = app.mount(&#39;#root&#39;);
</script>

Salin selepas log masuk

Kami mula-mula menggunakan CSS untuk mentakrifkan kesan animasi senarai ini. Saya tidak akan menerangkan secara terperinci di sini , kami menggunakan span memaparkan senarai nombor kami, dan perkara yang paling penting ialah kami menggunakan tag <transition-group> untuk membalut bahagian yang ingin kami animasikan. Apabila kita mengklik butang, fungsi js dilaksanakan untuk menambah nombor pada senarai dengan panjang senarai tambah satu. Pembaca boleh melihat kesan animasi dengan menjalankannya.

Animasi keadaan

Cara menggunakan animasi senarai Vue3 dan animasi negeri

Animasi keadaan agak mudah, iaitu menambah beberapa nilai peralihan dari satu keadaan ke keadaan lain, terutamanya mengawal kandungan melalui data Paparkan, contohnya, menukar daripada 1 kepada 10. Jika 1 terus bertukar kepada 10 serta-merta, ia akan kelihatan sangat kaku, tetapi menambah nombor lain di tengah, seperti 2, 3, 4... dan akhirnya menukar kepada 10 akan menjadi jauh lebih baik. Kod Seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>状态动画</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    // 状态动画：通过数据控制内容的展示
 const app = Vue.createApp({
        data() {
            return {
               number:1,
               animateNumber: 1
            }
        },
        methods: {
            handleClick(){
                this.number =10;
                if(this.animateNumber<this.number){
                const animation =  setInterval(()=>{
                this.animateNumber += 1;
                    if(this.animateNumber === 10){
                    clearInterval(animation)
                     }
               },100);
               }
            }
        },
        template: 
        `
            <div>
                <div>{{animateNumber}}</div>
                <button @click="handleClick">do</button>  
            </div>
        `
    });
    const vm = app.mount(&#39;#root&#39;);
</script>

Salin selepas log masuk

Animasi senarai adalah agak mudah Apabila kami mengklik butang laksana, kami menggunakan fungsi js untuk mengubah suai nilai yang dipaparkan setiap 100 milisaat sehingga nilai menjadi keadaan yang diingini. .

Atas ialah kandungan terperinci Cara menggunakan animasi senarai Vue3 dan animasi negeri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!