JSFiddle - React, Tailwind, and code Playground

by Plínio Naves

HTML

<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vue"></script>

<div id="app">

  <h2>Animações</h2>
  
  <button v-on:click="show = !show">
    Alternar
  </button>
  
  <input @keyup.shift="onKey">
  
  <!-- <transition name="fade">
    <div class="box" v-if="show"></div>
  </transition> -->
  
  <!-- <transition name="bounce">
    <div class="box" v-if="show"></div>
  </transition> -->
  
  <!-- usando libs de terceiros (animate.css) -->
  <transition name="custom-animate-pjn" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
    <div class="box" v-if="show"></div>
  </transition>
  
</div>

CSS

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

/* transition */
.fade-enter-active {
  transition: all .3s ease;
}
.fade-leave-active {
  transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.fade-enter /* .fade-leave-active em versões anteriores a 2.1.8 */ {
  transform: scale(3);
  opacity: 0;
}

.fade-leave-to {
  transform: translateX(150px);
  opacity: 0;
}


/* animacao */
.bounce-enter-active {
  animation: bounce-in 0.5s;
}

.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.9);
  }
  100% {
    transform: scale(1);
  }
}

/* mesclado com animate.css */
.custom-animate-pjn-enter-active, .custom-animate-pjn-leave-active {
  transition: all 0.3s;
}
.custom-animate-pjn-enter, .custom-animate-pjn-leave-to {
  opacity: 0;
}

JavaScript

new Vue({
	el: '#app',
  data: {
  	show: false
  },
  methods: {
  	onKey: function(event) {
    	console.log('onKey', event.key)
    }
  }
});