Angular Animation

angular_anim

.sharer-message-container {
  // finished state when visible
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 100;
  padding: 20px 10px;
  &.ng-hide-add, &.ng-hide-remove {
    // quality of the transition
    transition: 0.5s linear all;
    display:block!important;
  }
  &.ng-hide-add {
    // state at beginning of hiding
    top: 0%;
  }
  &.ng-hide-add.ng-hide-add-active {
    // finished state we are moving towards
    top: 100%;
  }
  &.ng-hide-remove {
    // beginning hidden state moving towards visible
    top: 100%;
  }
  &.ng-hide-remove.ng-hide-remove-active {
    // becoming visible, what we are moving towards
    top: 0%;
  }
}