Vue系列之 => 列表动画

  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             border : 1px dashed #999;
 15             margin : 5px;
 16             line-height : 35px;
 17             padding-left: 5px;
 18             font-size: 12px;
 19         }
 20 
 21         li:hover{
 22             background-color: antiquewhite;
 23             transition: all 0.8s ease;
 24         }
 25         .v-enter,
 26         .v-leave-to{
 27             opacity: 0;
 28             transform: translateY(80px);
 29         }
 30 
 31         .v-enter-active,
 32         .v-leave.active{
 33             transition : all 0.6s ease;
 34         }
 35     </style>
 36 </head>
 37 
 38 <body>
 39     <div id="app">
 40         <div>
 41             <label for="">ID:
 42                 <input type="text" v-model="id">
 43             </label>
 44 
 45             <label for="">Name:
 46                 <input type="text" v-model="name">
 47             </label>
 48             <input type="button" value="添加" @click="add">
 49         </div>
 50 
 51         <ul>
 52             <!-- <li v-for="item in list" :key="item.id">
 53                 {{ item.id }} --- {{  item.name }}
 54             </li> -->
 55             <!-- 在实现列表过渡的时候，如果需要过渡的元素是通过v-for循环出来的，不能使用
 56             transition 包裹，需要使用 transitionGroup -->
 57             <transition-group>
 58                 <li v-for="item in list" :key="item.id">
 59                     {{ item.id }} --- {{ item.name }}
 60                 </li>
 61             </transition-group>
 62         </ul>
 63     </div>
 64     <script>
 65         var vm = new Vue({
 66             el: '#app',
 67             data: {
 68                 id: '',
 69                 name: '',
 70                 list: [{
 71                         id: 1,
 72                         name: '张三'
 73                     },
 74                     {
 75                         id: 2,
 76                         name: '李四'
 77                     },
 78                     {
 79                         id: 3,
 80                         name: '王五'
 81                     },
 82                     {
 83                         id: 4,
 84                         name: '王金'
 85                     },
 86                 ]
 87             },
 88             methods: {
 89                 add() {
 90                     this.list.push({
 91                         id: this.id,
 92                         name: this.name
 93                     });
 94                     this.id = this.name = '';
 95                 }
 96             },
 97         })
 98     </script>
 99 </body>
100 
101 </html>
Vue系列之 => 列表动画

猜你喜欢
