Vue 2.0 Hello World

by nkovacs

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <button type="button" @click="removeFirst">Remove first</button>
  <button type="button" @click="removeSecond">Remove second</button>
  <button type="button" @click="restoreFirst">Restore first</button>
  <button type="button" @click="replaceFirst">Replace first</button>
  <button type="button" @click="replaceThird">Replace third</button>
  <button type="button" @click="injectThird">Inject third</button>
  <button type="button" @click="addMore">Add more</button>
  <button type="button" @click="replaceAll">Replace all</button>
  <transition-group-plus tag="ul" class="content__list" name="company"
    :css="false"
    @before-leave="beforeLeave"
    @before-all-leave="beforeAllLeave"
    @leave="leave"
    @after-leave="afterLeave"
    @leave-cancelled="leaveCancelled"
    
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @enter-cancelled="enterCancelled"
   >
    <li class="company" v-for="(company, index) in list" :key="company.id" :data-index="index">
      {{ company.name }}
    </li>
  </transition-group-plus>
</div>

SCSS

$transmult: 1;

/* base */
.company {
  backface-visibility: hidden;
  z-index: 1;
}

/* moving */
.company-move {
  transition: all (200ms * $transmult) ease-in-out (100ms * $transmult);
}

/* appearing */
.company-enter-active {
  transition: all (400ms * $transmult) ease-out;
}

/* disappearing */
.company-leave-active {
  transition: all (200ms * $transmult) ease-in;
  z-index: 0;
  position: absolute;
}

/* appear at / disappear to */
.company-enter {
  opacity: 0;
  transform: translateX(-100%);
}
.company-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

JavaScript

var baseTransitionGroup = Vue.component('TransitionGroup')

var oldBeforeUpdate = Vue.config.optionMergeStrategies.beforeUpdate
Vue.config.optionMergeStrategies.beforeUpdate = function(parent, child, vm) {
	if (parent) {
  	if (!Array.isArray(child)) {
    	child = [child]
    }
    return child.concat(parent)
  }
  return oldBeforeUpdate(parent, child, vm)
}

Vue.component('TransitionGroupPlus', {
	extends: Vue.component('TransitionGroup'),
  beforeUpdate() {
    var l = this.removed.length
    var i
    for (i = 0; i < l; i++) {
    	this.$emit('before-all-leave', this.removed[i].elm)
    }
  },
})

Vue.config.optionMergeStrategies.beforeUpdate = oldBeforeUpdate

new Vue({
  el: '#app',
  created() {
  	this.leaveCount = 0
    this.enterCount = 0
  },
  methods: {
  	beforeAllLeave(el) {
    	el.style.top = el.offsetTop + "px"
    },
  	beforeLeave(el) {
      // el.style.position="absolute"
      // el.style.top = top + "px"
      el.classList.add("company-leave-active")
      el.classList.add("company-leave")
    },
    leave(el, done) {
      setTimeout(function() {
      	el.classList.remove("company-leave")
        el.classList.add("company-leave-to")
        setTimeout(function() {
          el.classList.remove("company-leave-to")
          el.classList.remove("company-leave-active")
          done()
        }, 200)
      }, Math.sqrt(this.leaveCount)*50)
      this.leaveCount++
    },
    afterLeave(el) {
    	this.leaveCount--
      if (this.leaveCount < 0) {
      	this.leaveCount = 0
      }
    },
    leaveCancelled(el) {
    	this.leaveCount--
      if (this.leaveCount < 0) {
      	this.leaveCount = 0
      }
    },
    
    beforeEnter(el) {
      el.classList.add("company-enter-active")
      el.classList.add("company-enter")
    },
    enter(el, done) {
      setTimeout(function() {
      	el.classList.remove("company-enter")
        el.classList.add("company-enter-to")
        setTimeout(function() {
         ...