lixin-web/webapp/less/plugins/modal-physics.less

vue and bootstrap

.modal{
  .display(flex);
  .align-items(center);
  .justify-content(center);
  pointer-events: none;
  &.in{
    pointer-events: auto;
  }
}
//iOS Safari position fixed click offset issue,not transform
@media (min-width: @screen-md) and (device-aspect-ratio: 16/9),(device-aspect-ratio: 16/10){
  .modal{
    visibility: hidden;
    &.fade{
      opacity: 1;
      .transition-duration(.45s);
    }
    &.in{
      visibility: visible;
      .modal-dialog {
        .animation(modalComeIn .25s ease);
        visibility: visible; /* to keep @ final state */
      }
      .modal-body {
        opacity: 1;
        transform: translateY(0) scale(1, 1);
      }
    }
    &.state-leave {
      .modal-dialog {
        .animation(modalHeadOut .35s ease .1s);
        visibility: visible;
      }
      .modal-body {
        opacity: 0;
        transform: translateY(0) scale(1, 1);
        .transition-delay(0s);
        .transition-duration(.35s);
        .transition-timing-function(ease);
        .translateY(25px);
      }
    }
  }

  .modal-dialog {
    visibility: hidden;
    margin-top: 10% \9;
    .box-shadow(2px 2px 8px 1px rgba(0,0,0,.2));
    .backface-visibility(hidden); // helps render animation
    .transform(translate3d(0,0,0)); // helps render animation
    .transform-style(preserve-3d); // helps render animation
    > .close{
      position: absolute;
      right: 8px;
      top: 5px;
      z-index:1;
      font-size: 24px;
    }
  }

  .modal-body {
    opacity: 0;
    .transform(translateY(0) scale(.8, .8) translateZ(0));
    .transition-property(opacity, transform);
    .transition-duration(.25s);
    .transition-delay(.1s);
  }

  .modal-backdrop{
    visibility: hidden;
    .transition(opacity .25s ease 0s, visibility linear .35s);
    &.in {
      visibility: visible;
      .transition-delay(0s);
      .transition-duration(.2s, 0s);
    }
  }
}

*::-ms-backdrop, .modal{display: block}
@media @ie10hack {
  .modal{display: block}
}
*::-ms-backdrop, .modal-dialog{
  margin-top: 10%;}

@keyframes modalComeIn {
  0% {
    visibility: hidden;
    opacity: 0;
    transform: scale(0.8, 0.8);
  }
  65.5% {
    transform: scale(1.03, 1.03);
  }
  100% {
    visibility: visible;
    opacity: 1;
    transform: scale(1, 1);
  }
}

@keyframes modalHeadOut {
  0% {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1, 1);
  }
  100% {
    visibility: hidden;
    opacity: 0;
    transform: translateY(35px) scale(0.97, 0.97);
  }
}