vuejs
/
vue
spegling av https://github.com/vuejs/vue.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Move Animations</title>
    <style>
      .container {
        position: relative;
        padding: 0;
      }
      .item {
        width: 100%;
        height: 30px;
        background-color: #f3f3f3;
        border: 1px solid #666;
        box-sizing: border-box;
      }
      /* 1. declare transition */
      .fade-move,
      .fade-enter-active,
      .fade-leave-active {
        transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
      }
      /* 2. declare enter from and leave to state */
      .fade-enter,
      .fade-leave-to {
        opacity: 0;
        transform: scaleY(0.01) translate(30px, 0);
      }
      /* 3. ensure leaving items are taken out of layout flow so that moving
            animations can be calculated correctly. */
      .fade-leave-active {
        position: absolute;
      }
    </style>
    <script src="../../../node_modules/lodash/lodash.min.js"></script>
    <!-- Delete ".min" for console warnings in development -->
    <script src="../../../dist/vue.min.js"></script>
  </head>
  <body>
    <div id="el">
      <button @click="insert">insert at random index</button>
      <button @click="reset">reset</button>
      <button @click="shuffle">shuffle</button>
      <transition-group tag="ul" name="fade" class="container">
        <item
          v-for="item in items"
          class="item"
          :msg="item"
          :key="item"
          @rm="remove(item)"
        >
        </item>
      </transition-group>
    </div>

    <script>
      var items = [1, 2, 3, 4, 5]
      var id = items.length + 1

      var vm = new Vue({
        el: '#el',
        data: {
          items: items
        },
        components: {
          item: {
            props: ['msg'],
            template: `<div>{{ msg }} <button @click="$emit('rm')">x</button></div>`
          }
        },
        methods: {
          insert() {
            var i = Math.round(Math.random() * this.items.length)
            this.items.splice(i, 0, id++)
          },
          reset() {
            this.items = [1, 2, 3, 4, 5]
          },
          shuffle() {
            this.items = _.shuffle(this.items)
          },
          remove(item) {
            var i = this.items.indexOf(item)
            if (i > -1) {
              this.items.splice(i, 1)
            }
          }
        }
      })
    </script>
  </body>
</html>