agneta-angularjs/source/style/view.module.styl

Create your agneta applications with AngularJS

.view-animate-container {
  position:relative;
  height:100px!important;
  position:relative;
  background:white;
  border:1px solid black;
  height:40px;
  overflow:hidden;
}

@keyframes fadeIn {
  0%    { opacity: 0; }
  50%   { opacity: .5; }
  100%  { opacity: 1; }
}

@keyframes scaleIn {
  from    { transform:scale(0.9); }
  to      { transform: scale(1); }
}


@keyframes fadeOut {
  0%    { opacity: 1; }
  50%   { opacity: .5; }
  100%  { opacity: 0; }
}

ng-view{

  position:absolute;
  background: white;
  top:0;
  width:100%;
  height:100%;
  z-index: 10;

  &.ng-enter{
    animation: fadeIn 400ms both ease, scaleIn 400ms both ease;
  }

}

#view-content{
  min-height: 100%;

  >md-content{
    background-color: transparent;
    >.view-container{
      min-height: 100%;
      position: relative;
      margin-bottom: footer-height;
      &.footer-hidden{
        margin-bottom: 0;
      }
    }
  }
}

.view-animate {
  padding:10px;
}

.view-animate.ng-enter, .view-animate.ng-leave {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;

  display:block;
  width:100%;
  border-left:1px solid black;

  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  padding:10px;
}

.view-animate.ng-enter {
  left:100%;
}
.view-animate.ng-enter.ng-enter-active {
  left:0;
}
.view-animate.ng-leave.ng-leave-active {
  left:-100%;
}