Vue and CSS animation

by WILLIAM CORREA

HTML

<div id="app" :class="classNames">
  <button @click="zuar">Zuar</button> | <button @click="reset">Arrumar</button>
  <hr>
  {{ record }}
</div>

Vue

new Vue({
  el: "#app",
  data: {
    record: {
    	items: ['Um']
    },
    backup: {}
  },
  methods: {
  	zuar () {
    	this.record.items.push(Math.random())
    },
  	reset () {
    	this.record = clone(this.backup)
    }
  },
  created () {
  	this.backup = clone(this.record)
  }
})

/**
 * @param {*} element
 * @returns {*}
 */
function clone (element) {
  // Handle the 3 simple types, and null or undefined
  if (element === null || element === undefined || typeof element !== 'object') {
    return element
  }

  // Handle Date
  if (element instanceof Date) {
    const date = new Date()
    date.setTime(element.getTime())
    return date
  }

  // Handle Array
  if (element instanceof Array) {
    return element.map(clone)
  }

  // Handle Object
  if (element instanceof Object) {
    return Object.keys(element).reduce((accumulate, property) => {
      accumulate[property] = clone(element[property])
      return accumulate
    }, {})
  }

  throw new Error('Unable to copy element! Its type isn\'t supported.')
}