How to archive zoomIn and zoomOut animate for ngenter and ngLeave option using angularJs

I need to archive zoom in and zoom out animation when the user enters and leave the page view section, I can able to archive slide left, right, top and bottom animation effect but I am facing the issue in zoomin and zoomout animation when enter and leave the page view section.

HTML:

<div class="links">
    <a href="#/first">First</a>
    <a href="#/second">Second</a>
    <a href="#/third">Third</a>
  </div>

CSS:

/* Default view */
.view{
  position: absolute;
  top: 100px;
  width: 100%;
  transition: 300ms;
}

/* First animation*/
.first .view.ng-enter{
  left: -100%;
}

.first .view.ng-enter.ng-enter-active{
  left: 0%;
}

.first .view.ng-leave{
  left: 0%;
}

.first .view.ng-leave.ng-leave-active{
  left: 100%;
}

/* Second animation*/
.second .view.ng-enter{
  left: 100%;
}

.second .view.ng-enter.ng-enter-active{
  left: 0%;
}

.second .view.ng-leave{
  left: 0%;
}

.second .view.ng-leave.ng-leave-active{
  left: -100%;
}

/* Third animation*/
.third .view.ng-enter{
  top: 100%;
}

.third .view.ng-enter.ng-enter-active{
  top: 0%;
}

.third .view.ng-leave{
  top: 0%;
}

.third .view.ng-leave.ng-leave-active{
  top: -100%;
}

/* Third animation*/
.welcome .view.ng-enter{
  opacity: 0;
}

Demo Link

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/10/01/how-to-archive-zoomin-and-zoomout-animate-for-ngenter-and-ngleave-option-using-angularjs/
via @lzomedia #developer #freelance #web #lzomedia.com