Vue.js TweenMax

by uto usui

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div id="app">
      <div class="">
        <button class="button" id="button" @click="toggle">{{show ? 'leave' : 'enter'}}</button>
       
        <transition
                @enter="enter"
                @leave="leave"
                :css="false"
        >
          <img v-show="show" class="image" src="https://source.unsplash.com/1600x900/?nature,water" alt="placeholder">
        </transition>
      </div>
      
</div>

JavaScript

const root = new Vue({
   
   data: function() {
     return {
       show: false
     }
   },
   
   methods: {
    toggle() {
      this.show = !this.show
    },
    enter(el, done) {
    	TweenMax.fromTo(el, 1, {
      	x: '-100%',
        rotationX: 180,
      }, {
        x: '0%',
        rotationX: 0,
        scale: 1,
        onComplete: done,
        ease: Expo.easeOut,
      })
    },
    leave(el, done) {
    	TweenMax.to(el, .5, {
      
      	x: '100%',
        rotationX: 360,
        scale: .1,
        onComplete: done,
        ease: Expo.easeIn,
      
      })
    }
  },

});

root.$mount( '#app' );