Vue Transição entre elementos

by Plínio Naves

HTML

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

<div id="app">
  <transition mode="in-out">
    <button :key="docState" @click="alternar" style="position: absolute">
      {{ buttonMessage }}
    </button>
  </transition>
</div>

CSS

.box {
  width: 350px;
  height: 250px;
  background-color: green;
  margin: 20px;
}

.v-enter{
  transform: translateX(50px);
  opacity: 0;
}

.v-leave-to {
  transform: translateX(-50px);
  opacity: 0;
}

.v-enter-active, .v-leave-active {
  transition: all 0.8s;
}

JavaScript

new Vue({
	el: '#app',
  data: {
  	docState: 'saved'
  },
  computed: {
    buttonMessage: function () {
      switch (this.docState) {
        case 'saved': return 'Editar'
        case 'edited': return 'Salvar'
        case 'editing': return 'Cancelar'
      }
    }
  },
  methods: {
  	alternar(event) {
    	console.log(this.docState)
    	switch (this.docState) {
        case 'saved': 
        	this.docState = 'edited'
          break
        case 'edited': 
        	this.docState = 'editing'
          break
        case 'editing': 
        	this.docState = 'saved'
      }
      console.log(this.docState)
    }
  }
});