Android Appear Animation

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>
  
  <transition 
    name="ios-slide">
    <div class="box" v-if="show" key="um">
      Teste
    </div>
    <!-- <div class="box" v-else key="dois"></div> -->
  </transition>
  
</div>

CSS

body {
  overflow: hidden;
}

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



.appear-enter, .appear-leave-to {
  opacity: 0;
  transform: translateY(200px);
}

.appear-enter-active, .appear-leave-active {
  transition: all 0.4s ease;
}



.ios-slide-enter, .ios-slide-leave-to {
  opacity: 0;
}

.ios-slide-enter {
  transform: translateX(-350px);
}

.ios-slide-leave-to {
  transform: translateX(350px);
}

.ios-slide-leave {
  transform: translateX(510px);
}

.ios-slide-enter-active, .ios-slide-leave-active {
  transition: all 5s;
}

JavaScript

new Vue({
	el: '#app',
  data: {
  	show: false
  },
  methods: {
  	beforeLeave(el) {
    	console.log(el);
    },
  	leave(el, done) {
    	done()
    }
  }
});