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