Как реализовать плавную анимация при клике (
data() {
return {
show: false,
};
},
methods: [
toggleShow(){
this.show = !this.show;
},
}
.red {
color: red;
}
.item {
opacity: 0;
height: 0;
transition: opacity 0.3s, height 0.3s 0.1s;
}
.active .item {
opacity: 1;
height: 30px;
transition: opacity 0.3s 0.1s, height 0.3s;
}
<Button @click="toggleShow()">Show</Button>
<div v-if="show" :class="{'active':show}">
<p class="red item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, accusantium!
</p>
</div>
появления блока)
v-if
, оставив только бинд наclass
.