[Vuejs]-Vue animation unwanted change in div size

0👍

.QBox-enter-active{
  opacity: 1;
    -webkit-animation: slide-in 0.7s infinite;
    -moz-animation: slide-in 0.7s infinite;
    -o-animation: slide-in 0.7s infinite;
    animation: slide-in 0.7s infinite;
}
@keyframes slide-in {
    0% {opacity: 1;}
    50% {opacity: 0.5;}
    100% {opacity: 0;}
}

First, you didn’t set a duration for your animation

Second, the change trajectory of your frame is not clear

That’s why the [sudden] change

try this

Leave a comment