小程序使用animate.css

wxml

 

 wxss

@-webkit-keyframes slideInRight {

  from {

    -webkit-transform: translate3d(100%, 0, 0);

    transform: translate3d(100%, 0, 0);

    visibility: visible;

  }

  to {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }

}

@keyframes slideInRight {

  from {

    -webkit-transform: translate3d(100%, 0, 0);

    transform: translate3d(100%, 0, 0);

    visibility: visible;

  }

  to {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }

}

.animate__slideInRight {

  -webkit-animation-name: slideInRight;

  animation-name: slideInRight;

  -webkit-animation-duration:0.5s;

  animation-duration: 0.5s;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

}

js data{

    animateStyle: "animate__slideInRight"

,}

网址

 https://animate.style/#usage

 https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.css