19. Animating Element in Vue

We use button to show and hide a h2 text element. The name of the transition is slide-fade.

It slides in and out. But when it slides out, it also scales to 0.

This is App.vue file:

<template>
  <div>
    <button @click="show = !show">Toggle render</button>
    <transition name="slide-fade">
      <h2 v-if="show">hello</h2>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

<style>
.slide-fade-enter {
  transform: translateX(150px);
  opacity: 0;
}
.slide-fade-enter-active {
  transition: all 2.5s;
}
.slide-fade-leave-active {
  transition: all 50s;
}
.slide-fade-leave-to {
  transform: translateX(350px);
  transform: scale(0);
  opacity: 0;
}
button {
  color: white;
  background-color: green;
  border-radius: 10px;
  padding: 5px;
  display: block;
  margin: 0 auto;
}
h2 {
  color: blue;
  background-color: orange;
  width: 400px;
}
</style>

This is output as the element leaves (at the beginning and at the middle)

Near the middle showing it scaling towards 0: