.trans-slide__in-left {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  display: block !important; }

.trans-slide__in-right {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  display: block !important; }

.trans-slide__out-left,
.trans-slide__out-right {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  display: block !important; }

.trans-slide__animate {
  will-change: transform, -webkit-transform;
  -webkit-transition: -webkit-transform ease-out 200ms;
  transition: transform ease-out 200ms;
  z-index: 999; }

.trans-slide__out {
  -webkit-transform: translateX(100%);
  transform: translateX(100%); }

.trans-slide__out.trans-slide__out-left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%); }

.trans-slide__in {
  -webkit-transform: translateX(0);
  transform: translateX(0); }

.trans-fade__in,
.trans-fade__out {
  display: block !important;
  opacity: 0;
  will-change: opacity;
  -webkit-transition: opacity ease-in 200ms;
  transition: opacity ease-in 200ms; }

.trans-fade__out {
  opacity: 1; }

.trans-fade__in-animate {
  opacity: 1; }

.trans-fade__out-animate {
  opacity: 0; }

.xin-app {
  position: absolute;
  width: 100%;
  height: 100%; }

xin-pager {
  box-sizing: border-box;
  display: block;
  position: relative;
  overflow: hidden;
  height: 100%; }
  xin-pager .xin-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.xin-view {
  box-sizing: border-box;
  display: none; }
  .xin-view.xin-view--visible {
    display: block; }

xin-for {
  display: none;
  visibility: hidden; }

[lazy-view] {
  display: none; }