Vue Case List animation examples

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <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-Active-Enter, 
    .v-leave-active { 
      Transition : All 0.6s EASE ; 
    } 

    / * The following .v-move and .v-leave-active conjunction, possible subsequent elements of the list, the effect of gradually drift up * / 
    .v-Move { 
      Transition : All 0.6s EASE ; 
    } 
    .v-Leave-Active { 
      position : Absolute ; 
    } 
  </ style > 
</ head > 

< body > 
  < divid="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> -->
      <!--When implementing the transition list, if required transition elements, is rendered by v-for out of the loop, you can not use the transition package is required transitionGroup -> 
      <-! Elements animate If you want to create for v-for circulation must be set for each element: key attributes -> 
      <! - just show up to ransition-group appear to add attributes to achieve the page when admission time effect -> 
      <! - by as transition-group elements , tag attribute set, specifies transition-group elements specified rendering, if not specified tag attribute, a default, the label is rendered as span -> 
      < transition-group appear tag = "UL" > 
        < Li V-for = "(Item , I) in List " : Key =" item.id " @click =" del (I) " > 
          {{}} --- item.id item.name, for {{}} 
        </ Li >
      </transition-group> 
    <-! </ UL> -> 

  </ div > 

  < Script > 
    // Create Vue instance, to give the ViewModel 
    var VM =  new new Vue ({ 
      EL: ' #app ' , 
      Data: { 
        ID: '' , 
        name : '' , 
        List: [ 
          {ID: . 1 , name: ' Zhao Gao ' }, 
          {ID: 2 , name: ' Qin Hui ' }, 
          {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>
</body>

</html>
Vue Case List animation examples

Guess you like
