[英]Vue 3 button is jumping on v-show
Can anybody advice how can I fix this jumping button?有人可以建议我如何修复这个跳跃按钮吗?
I am using MaterializedCSS framework.我正在使用 MaterializedCSS 框架。
<h3 class="my-3">{{ name }}</h3>
<hr />
<transition name="fade"
><div v-show="isHidden">
<span>Here I am</span>
</div></transition
>
<button
@click="isHidden = !isHidden"
class="waves-effect waves-light btn my-8"
>
Click Me
</button>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>
I am using v-show directive so the element exists in DOM, its just hidden before button is clicked.我正在使用 v-show 指令,因此该元素存在于 DOM 中,它只是在单击按钮之前隐藏。 As soon as button is clicked appeared texts moves button down.单击按钮后,出现的文本会将按钮向下移动。
You need to put the <transition>
into a container with a fixed height.您需要将<transition>
放入具有固定高度的容器中。
For example:例如:
<div style="height: 50px"><transition name="fade">...</transition></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.