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="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="replaceAll">Replace all</button>
  <transition-group tag="ul" class="content__list" name="company" @before-leave="beforeLeave" @leave="leave">
    <li class="company" v-for="(company, index) in list" :key="company.id" :data-index="index">
      {{ company.name }}
    </li>
  </transition-group>
</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;
}

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

JavaScript

new Vue({
  el: '#app',
  methods: {
  	beforeLeave(el) {
      var top = 45 // el.offsetTop
      var index = el.dataset.index
      // console.log(top, index)
      top = top + index * 18
      // setTimeout(function() {
      	el.style.position="absolute"
        el.style.top=top + "px"
      // }, 0)
    },
    leave(el) {
    	// el.style.position="absolute"
    },
  	removeFirst() {
    	if (this.list[0].id !== 1 && this.list[0].id !== 6) {
      	return
      }
    	this.list.splice(0, 1)
    },
    restoreFirst() {
    	if (this.list[0].id === 1) {
      	return
      }
    	this.list.unshift({
      	id: 1,
        name: "Company 1",
      })
    },
    replaceFirst() {
    	if (this.list[0].id === 1) {
      	Vue.set(this.list, 0, {id: 6, name: "Company 1 replaced"})
      } else if (this.list[0].id === 6) {
      	Vue.set(this.list, 0, {id: 1, name: "Company 1"})
      }
    },
    replaceThird() {
    	if (this.list[2].id === 3) {
      	Vue.set(this.list, 2, {id: 33, name: "Company 3 replaced"})
      } else if (this.list[2].id === 33) {
      	Vue.set(this.list, 2, {id: 3, name: "Company 3"})
      }
    },
    injectThird() {
    	if (this.list[2].id !== 3) {
      	this.list.splice(2, 0, {
        	id: 3,
          name: "Company 3",
        })
      }
    },
    replaceAll() {
    	if (this.replaced) {
      	this.list=[
          {id: 1, name: "Company 1"},
          {id: 2, name: "Company 2"},
          {id: 3, name: "Company 3"},
          {id: 4, name: "Company 4"},
          {id: 5, name: "Company 5"},
        ]
      } else {
        this.list=[
          {id: 11, name: "Company 11"},
          {id: 12, name: "Company 12"},
          {id: 13, name: "Company 13"},
          {id: 14, name: "Company 14"},
          {id: 15, name: "Company 15"},
        ]
      }
      this.replaced = !this.replaced
    }
  },
  data: {
  	replaced: false,
    list: [
    	{id: 1, name: "Company 1"},
      {id: 2, name: "Company 2"},
      {id: 3, name:...