I am trying to get it work sidebar related to this link
Entering works but leaving not works on both overlay and slide back.
<div class="fixed inset-0 flex z-40 lg:hidden" role="dialog" aria-modal="true" v-show="mobileMenuOpen">
<transition
enter-class="opacity-0"
enter-active-class="transition-opacity ease-linear duration-300"
enter-to-class="opacity-100"
leave-class="opacity-0"
leave-active-class="transition-opacity ease-linear duration-300"
leave-to-class="opacity-0"
>
<div class="fixed inset-0 bg-black bg-opacity-25" aria-hidden="true" v-show="mobileMenuOpen" #click="closeMobileMenu"></div>
</transition>
<transition
enter-active-class="transition ease-in-out duration-300 transform"
enter-class="-translate-x-full"
enter-to-class="translate-x-0"
leave-class="translate-x-0"
leave-active-class="transition ease-in-out duration-300 transform"
leave-to-class="-translate-x-full"
appear
> sidebar code
Your starting state for leave is opacity-0 try changing it to opacity-100
...
leave-class="opacity-100"
...
v-leave: Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame.
Related
I’m trying to create a ‘modal’ component. It’s using a ‘v-if’ attribute for deciding whether the component is shown or not.
The Vue docs mention you can use ‘appear’ for transitions (https://vuejs.org/guide/built-ins/transition.html#transition-on-appear), which works well.
However, when I close the modal, the element gets removed from the DOM, and the ‘leave’ transition is not trigged.
Is there an opposite of ‘appear’ for Vue transitions? How can I apply a leave transition when an element is removed from the DOM?
Link of example: https://jsfiddle.net/jelledv4/3Lr79hyg/4/
<transition
appear
enter-active-class="transition duration-1000 ease-out"
enter-from-class="transform scale-95 opacity-0"
enter-to-class="transform scale-100 opacity-100"
leave-active-class="transition duration-1000 ease-in"
leave-from-class="transform scale-100 opacity-100"
leave-to-class="transform scale-95 opacity-0"
>
PS I could use ‘v-show’ instead of ‘v-if’ to mitigate this, but for this use-case ‘v-if’ suits better. Plus I’m wondering how I can tackle this issue
In your provided jsfiddle, you use v-if on the parent element of the Transition components. Instead, use v-if on the child/slot of the Transition component. Otherwise, the transition components will be removed immediately.
const app = Vue.createApp({
data() {
return {
show: false,
};
},
methods: {
toggle() {
this.show = !this.show;
},
}
});
app.mount('#app');
<div id="app">
<button #click="toggle" class="fixed z-10 bg-white ml-3 mt-3 border border-gray-800">Toggle</button>
<div>
<!-- Modal background -->
<transition
appear
enter-active-class="transition duration-1000 ease-out"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="transition duration-1000 ease-in"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-if="show" class="absolute left-0 top-0 w-full h-full bg-black bg-opacity-50"></div>
</transition>
<!-- Modal content -->
<transition
appear
enter-active-class="transition duration-1000 ease-out"
enter-from-class="transform scale-95 opacity-0"
enter-to-class="transform scale-100 opacity-100"
leave-active-class="transition duration-1000 ease-in"
leave-from-class="transform scale-100 opacity-100"
leave-to-class="transform scale-95 opacity-0"
>
<div v-if="show" class="fixed bg-red-500 w-52 h-52 z-10 mt-14">
<h2 >test</h2>
</div>
</transition>
</div>
</div>
<script src="https://unpkg.com/vue#3"></script>
<script src="https://cdn.tailwindcss.com"></script>
I'm currently working on a marketing website for a client. Because SSR would be over-engineered and I'm curious about JAMStack, I decided to make a static website using Nuxt, because I'm already familiar with it.
So I managed to implement Tailwind, which works fine, also when the static site is generated and live on Github pages for example. Now I want to add a feature like a send e-mail form or a menu with a toggle icon.
The simplest solution I could think of for the menu would be a reactive variable and conditional rendering using tailwind. This works fine on localhost using npm run dev, but I can't figure out how to implement this on the generated static site.
I couldn't even manage to fire a click event to a defined method in the script tag.
That's how I would do the burger menu with nuxt SRR, how can I implement something like this in static generated nuxt?
<template>
<div>
<nav
class="flex p-5 items-center fixed w-full border-b-4 border-green bg-white z-50 duration-300 transform justify-between">
<div>
<div><img src="logo.png" class="max-h-6 md:max-h-10" /></div>
</div>
<div class="w-10 h-5 flex flex-col relative cursor-pointer" id="nav-menu" #click="menuOpen = !menuOpen">
<div class="w-full h-1 bg-green absolute duration-200 transform "
:class="[menuOpen ? 'rotate-45 translate-y-2' : 'burger-hover1']" id="menu-first"></div>
<div class="w-full h-1 bg-green absolute bottom-0 duration-200 transform "
:class="[menuOpen ? '-rotate-45 -translate-y-2' : 'burger-hover2']" id="menu-second"></div>
</div>
</nav>
<Transition>
<div v-if="menuOpen" class="fixed w-screen h-screen bg-white pt-20 z-30 space-y-10 text-xl text-center">
<div class="mt-20" #click="menuOpen = !menuOpen">
<nuxt-link to="/">Start</nuxt-link>
</div>
<div #click="menuOpen = !menuOpen">
<nuxt-link to="/partner">Partner</nuxt-link>
</div>
<div #click="menuOpen = !menuOpen">
<nuxt-link to="/kontakt">Kontakt</nuxt-link>
</div>
<div #click="menuOpen = !menuOpen">
<nuxt-link to="/impressum">Impressum</nuxt-link>
</div>
</div>
</Transition>
</div>
</template>
<script>
export default {
name: 'Navbar',
data() {
return {
menuOpen: false
}
}
}
</script>
That's how it looks on localhost. When the static site is hosted, it won't toggle the menu.
I have a global confirmModal.vue which looks like this:
<template>
<Transition
appear
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div
#click="$emit('cancel')"
class="bg-black/50 z-50 fixed inset-0 flex justify-center items-center transition duration-300 ease-in-out p-8 cursor-pointer"
>
<Transition appear enter-from-class="scale-50" enter-to-class="scale-100">
<div
#click.stop
class="flex flex-col gap-4 shadow-2xl p-8 rounded min-w-[300px] max-w-[480px] bg-lf-white transition duration-300 ease-in-out cursor-auto"
>
<h3 class="font-medium text-2xl">{{ title }}</h3>
<p>{{ text }}</p>
<div class="flex justify-end gap-2">
<Button #click="$emit('cancel')" variant="white">Annuler</Button>
<Button #click="$emit('confirm')">Supprimer</Button>
</div>
</div>
</Transition>
</div>
</Transition>
</template>
The first transition adds a fade in effect to the backdrop while the nested transition adds a smooth apparition effect for the modal itself.
It works fine but what I don't understand is that when I close the modal, the leave part of the transition does not trigger at all.
This is what the component calling this modal looks like:
<ConfirmModal
v-if="showConfirmModal"
title="Suppression"
text="Êtes-vous sûr de vouloir supprimer cet article ?"
#cancel="handleHideConfirmModal"
#confirm="handleConfirmAction"
/>
Here's a gif of what it's currently looks like:
EDIT: I achieved the wanted result by wrapping ConfirmModal.vue with Transition from the parent component, like this:
<Transition
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<ConfirmModal
v-if="showConfirmModal"
title="Suppression"
text="Êtes-vous sûr de vouloir supprimer cet article ?"
#cancel="handleHideConfirmModal"
/>
</Transition>
I don't understand why I have to do this and why in this exemple the person doesn't need to do that though, they use Transition from inside the child component and the transition works fine
It's also not ideal because every time I use this component I will have to think to wrap it inside this transition for it to fully work
It's probably caused by the use of different versions of Vue.
Your question is tagged vuejs3, so you are very likely using Vue 3, but, in the example you linked, vue version 2.6.4 is being used.
In vue 3, at least, you must use the directives v-if or v-show in the root element inside the Transition component for it to trigger the changes whenever the root component inside appears and disappears.
you can read more about transitions here
We're using Quasar Framework with Vue.js. Consider the following q-card that is clickable:
<div class="q-pa-md row items-start q-gutter-md cursor-pointer">
<q-card class="my-card" clickable #click="GetSapRoster">
<q-card-section class="bg-primary text-white">
<div class="text-h6">SAP Truck Roster</div>
<div class="text-subtitle2">Get the truck planning</div>
</q-card-section>
</q-card>
</div>
How is it possible to achieve the same effect for a q-card as with a q-btn?
At the moment when using the class cursor-pointer it only fixes the mouse pointer but not the shading effect like a q-btn has.
You can use v-ripple + q-hoverable + q-focus-helper to simulate a button.
For example:
<q-card v-ripple class="my-box cursor-pointer q-hoverable">
<span class="q-focus-helper"></span>
<q-card-section>
...
</q-card-section>
</q-card>
Currently trying to build a portion of my site that when text is hovered over, a modal box appears below it (so people can hover over it). This would keep the modal present until they move their mouse outside of this.
The issue I face is as soon as my mouse moves from the text to the modal, the model dismisses (as it seems the mouseleave event is triggered).
<div class="relative" #mouseover="guestDropdown = true" #mouseout="guestDropdown = false">
<p class="flex items-center justify-between mt-4 text-xs font-medium leading-4 text-gray-600">
<span>Input:</span>
<span class="cursor-pointer text-deepskyblue-500">Hover</span>
</p>
<div class="absolute right-0 z-20 mt-2 -mx-3 bg-white border rounded" v-show="guestDropdown">
<p class="px-3 py-2">Some modal!</p>
</div>
</div>
Thank you.
It's hard to say without more code and reproducible example but mouseover/mouseout trigger on descendants which is probably something you don't want in this case. You can use mouseenter/mouseleave instead - those doesn't trigger on descendants and doesn't bubble...