微信扫一扫打赏支持

VUE实例课程---8、列表动画

VUE实例课程---8、列表动画

一、总结

一句话总结：

列表动画 也就是对列表使用动画，需要transition-group、v-move等知识点配合使用，列表动画记得对v-for设置 :key 属性
<style>
  li {
      border: 1px dashed #999;
      margin: 5px;
      line-height: 35px;
      padding-left: 5px;
      font-size: 12px;
      width: 100%;
  }

  li:hover {
      background-color: hotpink;
      transition: all 0.8s ease;
  }

  .v-enter,
  .v-leave-to {
      opacity: 0;
      transform: translateY(80px);
  }

  .v-enter-active,
  .v-leave-active {
      transition: all 0.6s ease;
  }

  /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
  .v-move {
      transition: all 0.6s ease;
  }
  .v-leave-active{
      position: absolute;
  }
</style>
<div id="app">

    <div>
        <label>
            Id:
            <input type="text" v-model="id">
        </label>

        <label>
            Name:
            <input type="text" v-model="name">
        </label>

        <input type="button" value="添加" @click="add">
    </div>

    <!-- <ul> -->
    <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
    <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
    <!-- 给 transition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 -->
    <!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 -->
    <transition-group appear tag="ul">
        <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
            {{item.id}} --- {{item.name}}
        </li>
    </transition-group>
    <!-- </ul> -->

</div>
<script src="../js/vue.js"></script>
<script>
    // 创建 Vue 实例，得到 ViewModel
    let vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            list: [
                { id: 1, name: '熊猫' },
                { id: 2, name: '兔子' },
                { id: 3, name: '老虎' },
                { id: 4, name: '海豚' }
            ]
        },
        methods: {
            add() {
                this.list.push({ id: this.id, name: this.name })
                this.id = this.name = ''
            },
            del(i) {
                this.list.splice(i, 1)
            }
        }
    });
</script>

 

 

1、<transition-group appear tag="ul"> 中 tag="ul" 的作用是什么？

指定transition-group的渲染标签为ul：通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签

 

 

2、<transition-group appear tag="ul"> 中的appear的作用？

设置入场动画：给 transition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果

 

 

3、为 v-for 循环创建的元素设置动画 的注意事项？

1、设置 :key 属性：如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性
2、使用transition-group：如果要为 v-for 循环创建的元素设置动画，不能使用 transition 包裹，需要使用 transition-group

 

 

4、v-move的作用是什么（比如这里删除元素的动画效果）？

v-move attribute会在元素改变定位的过程中应用动画，比如删除元素、元素乱序等改变元素位置的操作
<style>
  /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
  .v-move {
      transition: all 0.6s ease;
  }
  .v-leave-active{
      position: absolute;
  }
</style>

 

 

5、给hover效果设置动画？

在hover的样式上加上transition效果，例如transition: all 0.8s ease;
  li:hover {
      background-color: hotpink;
      transition: all 0.8s ease;
  }

 

 

 

二、列表动画

博客对应课程的视频位置：

 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>列表动画</title>
  6     <style>
  7         li {
  8             border: 1px dashed #999;
  9             margin: 5px;
 10             line-height: 35px;
 11             padding-left: 5px;
 12             font-size: 12px;
 13             width: 100%;
 14         }
 15 
 16         li:hover {
 17             background-color: hotpink;
 18             transition: all 0.8s ease;
 19         }
 20 
 21 
 22 
 23         .v-enter,
 24         .v-leave-to {
 25             opacity: 0;
 26             transform: translateY(80px);
 27         }
 28 
 29         .v-enter-active,
 30         .v-leave-active {
 31             transition: all 0.6s ease;
 32         }
 33 
 34         /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
 35         .v-move {
 36             transition: all 0.6s ease;
 37         }
 38         .v-leave-active{
 39             position: absolute;
 40         }
 41     </style>
 42 </head>
 43 <body>
 44 <!--
 45 
 46 
 47 
 48 -->
 49 <div id="app">
 50 
 51     <div>
 52         <label>
 53             Id:
 54             <input type="text" v-model="id">
 55         </label>
 56 
 57         <label>
 58             Name:
 59             <input type="text" v-model="name">
 60         </label>
 61 
 62         <input type="button" value="添加" @click="add">
 63     </div>
 64 
 65     <!-- <ul> -->
 66     <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
 67     <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
 68     <!-- 给 transition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 -->
 69     <!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 -->
 70     <transition-group appear tag="ul">
 71         <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
 72             {{item.id}} --- {{item.name}}
 73         </li>
 74     </transition-group>
 75     <!-- </ul> -->
 76 
 77 </div>
 78 <script src="../js/vue.js"></script>
 79 <script>
 80     // 创建 Vue 实例，得到 ViewModel
 81     let vm = new Vue({
 82         el: '#app',
 83         data: {
 84             id: '',
 85             name: '',
 86             list: [
 87                 { id: 1, name: '熊猫' },
 88                 { id: 2, name: '兔子' },
 89                 { id: 3, name: '老虎' },
 90                 { id: 4, name: '海豚' }
 91             ]
 92         },
 93         methods: {
 94             add() {
 95                 this.list.push({ id: this.id, name: this.name })
 96                 this.id = this.name = ''
 97             },
 98             del(i) {
 99                 this.list.splice(i, 1)
100             }
101         }
102     });
103 </script>
104 </body>
105 </html>

 

 

 

 

 

 
posted @ 2020-04-23 07:50  范仁义  阅读(298)  评论(0)    收藏  举报