Vue系列之 => 列表动画

最新推荐文章于 2024-04-18 09:49:30 发布

weixin_30807779

最新推荐文章于 2024-04-18 09:49:30 发布

阅读量79

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/winter-shadow/p/10202872.html

版权

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>Document</title>
  9     <script src="./lib/jquery2.1.4.min.js"></script>
 10     <script src="./lib/Vue2.5.17.js"></script>
 11     <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
 12     <style>
 13         li {
 14             width:100%;
 15             border : 1px dashed #999;
 16             margin : 5px;
 17             line-height : 35px;
 18             padding-left: 5px;
 19             font-size: 12px;
 20         }
 21 
 22         li:hover{
 23             background-color: antiquewhite;
 24             transition: all 0.8s ease;
 25         }
 26         .v-enter,
 27         .v-leave-to{
 28             opacity: 0;
 29             transform: translateY(80px);
 30         }
 31 
 32         .v-enter-active,
 33         .v-leave.active{
 34             transition : all 0.6s ease;
 35         }
 36 
 37         /* .v-move 和 .v-leave-active 配合使用能够实现列表后续的元素渐进 */
 38         .v-move {
 39             transition: all 0.6s ease;
 40         }
 41         .v-leave-active {
 42             position: absolute;
 43         }
 44     </style>
 45 </head>
 46 
 47 <body>
 48     <div id="app">
 49         <div>
 50             <label for="">ID:
 51                 <input type="text" v-model="id">
 52             </label>
 53 
 54             <label for="">Name:
 55                 <input type="text" v-model="name">
 56             </label>
 57             <input type="button" value="添加" @click="add">
 58         </div>
 59 
 60         <ul>
 61             <!-- <li v-for="item in list" :key="item.id">
 62                 {{ item.id }} --- {{  item.name }}
 63             </li> -->
 64             <!-- 在实现列表过渡的时候，如果需要过渡的元素是通过v-for循环出来的，不能使用
 65             transition 包裹，需要使用 transitionGroup -->
 66             <!-- appear属性实现页面载入时的入场效果 -->
 67             <!-- vue默认会渲染成span标签，tag指定渲染为ul -->
 68             <transition-group appear tag="ul">
 69                 <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
 70                     {{ item.id }} -- {{ i }} -- {{ item.name }}
 71                 </li>
 72             </transition-group>
 73         </ul>
 74     </div>
 75     <script>
 76         var vm = new Vue({
 77             el: '#app',
 78             data: {
 79                 id: '',
 80                 name: '',
 81                 list: [{
 82                         id: 1,
 83                         name: '张三'
 84                     },
 85                     {
 86                         id: 2,
 87                         name: '李四'
 88                     },
 89                     {
 90                         id: 3,
 91                         name: '王五'
 92                     },
 93                     {
 94                         id: 4,
 95                         name: '王金'
 96                     },
 97                 ]
 98             },
 99             methods: {
100                 add() {
101                     this.list.push({
102                         id: this.id,
103                         name: this.name
104                     });
105                     this.id = this.name = '';
106                 },
107                 del(index) {
108                     this.list.splice(index,1);
109                 }
110             },
111         })
112     </script>
113 </body>
114 
115 </html>