Vuejs 2.5 sink animation mult2

by jpeter06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="main">
  <p-menu></p-menu>
  <div style="display:flex;flex-grow:1;position:relative; width:100%; height:100%">
    <trans1><component v-bind:is="page_1"></component></trans1>
    <trans1><component v-bind:is="page_2"></component></trans1>
  </div>
  <div style="display:flex;flex-grow:1;position:relative; width:100%; height:100%">
    <trans1> <component v-bind:is="page_3"></component></trans1>
    <trans1> <component v-bind:is="page_4"></component></trans1>
  </div>
</div>

<template id="pMenu">
  <div class="menu" v-bind:class="{ active: isActive }">
    <ul>
      <li  v-bind:class="[page==item ?'focused':'']" v-for="item  in items" v-on:click="click(item)">
      {{item}}
      </li>
    </ul>
  </div>
</template>

<!-- PAGES -->
<template id="page2">
  <div class="page" >
   Page2
  </div>
</template>
 
<template id="page1">
  <div class="page" >
   Page1
   <innertext/>
  </div>
</template>
 
<template id="page3">
  <div class="page" style="background:orange;color:white !important">
  Page3
  </div>
</template>

<template id="page4">
  <div class="page" style="background:#38d838;color:white !important">
  Page4
  </div>
</template>



<template id="innertext">
  <div style="text-align: justify;line-height: 1.3;">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero 
  </div>
</template>
<template id="innertext2">
  <div style="text-align: justify;">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore...

CSS

html, body ,#main
{
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background:#fff;
    font-family:Arial;
    color:#888;
}

#main{
  display:flex; flex-direction:column;
  --animation-speed: 1.4s;
  --scale: 0.92;
}

.pageContExt{flex-grow:1;position:relative;overflow: hidden;
          border: 10px solid transparent;display:flex;}
.pageCont{flex-grow:1;position:relative;overflow: hidden;
          }
.pageCont.active{border: 1px inset rgba(250,250,250,0.6); }
/*shadow with animation*/
.pageShadow {
  box-shadow: 0 0px 15px rgba(0,0,0,0.3) inset;
  opacity: 0;
  position: absolute;
  top: 0;  left: 0;  width: 100%;  height: 100%;
  content:"";  pointer-events: none;
}
.pageShadow.active {  animation: show-hole calc(var(--animation-speed) );}
@keyframes show-hole{
  0%  {opacity:0 ;animation-timing-function: ease-out;  }
  33%  { opacity: 1;animation-timing-function: ease-out;  }
  70%  { opacity: 1;animation-timing-function: ease-in;  }
 100% { opacity: 0.2; animation-timing-function: ease-in; }
}

.page{
   will-change: transform;
   width:100%;height:100%;
   position: absolute;top:0px;left:0px;
   box-sizing: border-box;
   display: block;
   padding:12px;
   text-align:center;
   background-clip: border-box;
   overflow-y:auto;
   transform-origin:center;
   line-height:1.2;
}
.page::first-line{font-weight:bold; font-size:26px;}

@keyframes bounce-li{
  0%  {transform:   translate(0%,calc( 100% + 40px)) scale(var(--scale),var(--scale));animation-timing-function: ease-out;  }
  33%  {transform:   translate(0%,calc( 100% + 40px)) scale(var(--scale),var(--scale));animation-timing-function: ease-out;  }
  70%  {transform:   translate(0%,0%) scale(var(--scale),var(--scale));animation-timing-function: ease-in;  }
 100% {transform:    translate(0%,0%); animation-timing-function: ease-in; }
}

@keyframes bounce-lo{
  0%  {transform:  translate(0%,0%);animation-timing-function: ease-out;  }
  33%  {transform: ...

JavaScript

///////// trans1 ////
var trans1 = Vue.extend({
  template: `<div class="pageContExt">
              <div class="pageCont" v-bind:class="{ active: isActive }">
                <transition :name="transitionName" 
                v-on:before-enter="beforeEnter"
                v-on:after-enter="afterEnter" appear>
                  <slot></slot>
                </transition>
              </div> 
              <div class="pageShadow" ref="pageShadow" v-bind:class="{ active: isActive }">
              </div>
            </div>`,
  props: ['page'],
  data:function(){
  	return {
    		isActive:false,
    		transitionName:'pageL',
        el:null
    }
  },
  methods:{ 
    beforeEnter: function (el) { console.log(el);
      this.el=el;
      if(this.$refs["pageShadow"]){
        var self=this; 
        this.$refs["pageShadow"].classList.remove("active");
       setTimeout(function(){  self.$refs["pageShadow"].classList.add("active");  },88);
      }
      this.isActive=true;
    },
    afterEnter: function (el) {
      if(this.el==el){	this.isActive=false; this.el=null }
    }
  }
})
Vue.component('trans1', trans1);


///////// pMenu //////////
var pMenu = Vue.extend({
  template: '#pMenu',
  data:function(){
  	return {
    		page:'page1',
        isActive:false,
        timeoutId:null,
    		items:['page1','page2','page3','page4']
        }
  },
  methods:{
  	click:function(item){
      var isR=this.items.indexOf(item)>this.items.indexOf(this.page);
    	this.page=item;
      vv.transitionName=isR?'pageL':'pageR';
      vv.page_4=this.getRandom(vv.page_4);
      vv.page_1=this.getRandom(vv.page_1);
      vv.page_2=this.getRandom(vv.page_2);
      vv.page_3=this.getRandom(vv.page_3);
      vv.page=item;
    },
 		isFocused:function(item){
    	return item==this.page?'focused':''
    },getRandom:function(item){
      var pos=Math.floor(Math.random()*this.items.length)%this.items.length;
    	var next= this.items[pos];
      if(next==item)
      	next=...