<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                企業??AI智能體構建引擎,智能編排和調試,一鍵部署,支持知識庫和私有化部署方案 廣告
                [TOC] >[success] # 列表動畫 本章講解像 **列表** 這樣的 **多元素** 如何寫 **動畫效果** ,下面的代碼中每次 **點擊按鈕向數組前方添加一個數字,能看到了添加的數字從下到上的一個動畫效果** 代碼如下: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表動畫</title> <style> .lsit-item{ display: inline-block; margin-right: 10px; } /* -------------------入場動畫----------------------- */ .v-enter-from{ opacity: 0; transform: translateY(30px); } .v-enter-active{ transition: all .5s ease-in; } .v-enter-to { opacity: 1; transform: translateY(0); } </style> <!-- 通過cdn方式引入vue --> <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="lsit-item" v-for="item in list" :key="item">{{item}}</span> </transition-group> <button @click="handleClick">增加</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~ 但是這還是有一點點小瑕疵, **只有加進去的數字有動畫效果** ,在這之前 **每次添加數字時,右側的數字只會很生硬的想有擠過去** ,如果想讓 **列表其他元素擠到右側時候也有動畫** 該怎么辦呢,使用 **.v-move** 來解決此問題,代碼如下: ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表動畫</title> <style> .lsit-item{ display: inline-block; margin-right: 10px; } /* -------------------入場動畫----------------------- */ .v-enter-from{ opacity: 0; transform: translateY(30px); } .v-enter-active{ transition: all .5s ease-in; } .v-enter-to { opacity: 1; transform: translateY(0); } /* 其他列表移動時候可以.v-move做一些描述 */ .v-move{ transition: all .5s ease-in; } </style> <!-- 通過cdn方式引入vue --> <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="lsit-item" v-for="item in list" :key="item">{{item}}</span> </transition-group> <button @click="handleClick">增加</button> </div>` }) const vm = app.mount('#root') </script> </html> ~~~
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看