question: here the animation is set to zoom in and out of scale, but when it is actually executed, why does the text have corresponding animation in the horizontal direction? Please help me to answer my little doubts, thank you!
the following is all the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.bounce-enter-active {
animation: gob 0.8s;
}
.bounce-leave-active {
animation: gob 0.8s reverse;
}
@keyframes gob {
0% {
transform: scale(0);
}
50% {
transform: scale(2.5);
}
100% {
transform: scale(1);
}
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="go = !go"></button>
<transition name="bounce">
<div v-if="go">sadjfkasjflasjflasjflasjflksajdflksa</div>
</transition>
</div>
<script>
var vm = new Vue({
el: "-sharpapp",
data() {
return {
go: false
}
}
});
</script>
</body>
</html>