I'm making a slide sidebar with vuejs and tailwind. It works but feels kind of sluggish. Is there a way to make it smoother?
working example: https://codepen.io/tuturu1014/pen/oNzRXeW
<button @click="isOpen = !isOpen" class="bg-blue-200 p-5">
<span v-if="isOpen">Open</span>
<span v-else>Close</span>
</button>
<div class="flex flex-row max-w-7xl mx-auto min-h-screen">
<transition name="slide">
<div class="flex flex-col w-64 shadow-xl sm:rounded-lg bg-blue-200" v-if="isOpen">
<div class="min-h-screen">sidebar</div>
</div>
</transition>
<div class="flex w-full min-h-screen bg-red-400">
content
</div>
</div>
<style>
.slide-enter-active {
animation: slideIn 1s ease;
}
.slide-leave-active {
animation: slideIn 1s ease reverse;
}
@keyframes slideIn {
0% {max-width: 0%;}
50% {max-width: 50%;}
100% {max-width: 100%}
}
<style>
You should use transition
instead of animation
and target the width
property:
.slide-enter-active, .slide-leave-active {
transition: width 1s;
}
.slide-enter, .slide-leave-to{
width:0;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.