vuejs
/
vue
spogulis no https://github.com/vuejs/vue.git


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
							<!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 .5s cubic-bezier(.55,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="https://cdn.jsdelivr.net/lodash/4.3.0/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>