I am having trouble animating the menu component, which is expected to slide in and out on click, while the background fades in and out. I have in and out classes, depending on a 'showMenu' Boolean. In the sandbox, the menu flies in and out instantly when I click the Vue logo, but in my local version, everything works when they slide/fade in, but nothing happens when the menu closes. I am using the Bootstrap modal for this.
https://codesandbox.io/s/nk2xnz2wp0
As another user said, vue transitions are designed for this. You're code appeared to be overly complicated, I would advise against passing a function as a property. Vue has very good documentation about communication between child and parent components, I think maybe this is where your issues were arising from. I have modified your code to include a very basic vue transition and the menu now fades in and out, see https://codesandbox.io/s/0m13wz25pl?fontsize=14.
For possible future readers, the main code involved is:
<template>
<transition name="fade">
<HelloWorld v-on:click="showMenu = !showMenu;" v-if="showMenu" />
</transition>
</tempalte>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
Inside App I made a separate div for the background and did a separate Vue transition for menu and the background div like so:
<transition name="slide-menu" mode="in-out">
<MenuDrawer v-if="showMenu" :toggleMenu="toggleMenu" />
</transition>
<transition name="fade" mode="in-out">
<div class="darkBg" v-if="showMenu"></div>
</transition>
It definitely feels dirty, and I hope someone can show me a better solution.
Related
You can see the issue I'm having here:
https://codepen.io/ryanrapini/pen/LYeWZKR?editors=1010
Essentially, I have several dialogs which I have contained into their own custom "vue components" i.e. order-dialog.vue. In an ideal world, I could simply include this <order-dialog> component wherever I need it, and it would render the activator button and then handle all of the dialog state inside the component, so the parent doesn't need to worry.
Unfortunately, if I do this in a v-card-actions section I get spacing issues. Is this a bug with Vuetify or am I doing something wrong?
I thought that by moving the activator out of the <v-dialog> tag it might fix the issue, but it still doesn't unless I break my component up into a v-dialog component and a separate activator, which means I now need to manage the state of the dialog in the parent.
Thanks for any help.
I don't think you are doing something wrong, and I'm not sure that it's a Vuetify bug.
This comes from CSS rule in Vuetify library:
.v-application--is-ltr .v-card__actions>.v-btn.v-btn+.v-btn {
margin-left: 8px;
}
I think the authors assumed that this block should contain only buttons. But in your case (in 2nd and 3rd approach) an output HTML looks like this:
<div class="v-card__actions">
<button class="v-btn ...">
...
</button>
<div class="v-dialog__container"><!----></div>
<button type="button" class="v-btn ...">
...
</button>
<button type="button" class="v-btn ...">
...
</button>
</div>
So v-dialog__container breaks this rule.
You can fix you issue, by example, with an additional rule:
.v-application--is-ltr .v-card__actions>.v-btn:not(:first-child) {
margin-left: 8px !important;
}
Or you can also apply helper classes (ml-2) into specific buttons.
I beginner for Vue, and I trying make carousel via Vue.
I have the code: https://jsfiddle.net/z3m76w5r/4/ (example)
<style>
.switch-enter-active,
.switch-leave-active {
transition: all .5s ease-in-out;
}
.switch-enter {
left: 100%;
}
.switch-leave,
.switch-leave-to {
left: -100%;
}
</style>
<div id="banner">
<transition name="switch">
<banner class="content" v-bind:slide="currentSlide"></banner>
</transition>
<div>
I want animated my carousel. But my transition-vue don't work, despite I looked at the docs and manuals.
Reason why your transition using Vue build-in <transition> component doesn't work is because its designed to work when some element/component is entering or leaving the DOM in context of:
Conditional rendering (using v-if)
Conditional display (using v-show)
Dynamic components
Component root nodes
Your image element is not entering or leaving DOM. Its just there and you are changing it's attributes (like url etc. - which cannot be animated in any way).
For your transition to work you need at least 2 img tags to exist in the DOM during the transition - one that is leaving the DOM and one that is entering the DOM. Easiest way to do this is by using v-for with key and transition-group instead of just transition. You just change the index of image, v-for will create new img element, apply "enter" transition to it and "leave" transition to old img element (for previous index)
You can find great example of that here
On my Vuetify + Lealflet project the map hides all popup dialogs and I don't know why. I use Vue2Leaflet library. I am a beginner with web development. Here is a pic of the problem:
<l-map
:center="center"
:zoom="zoom"
#click.right="mapRclicked"
ref="map"
style="height: 50vh; width: 50vh"
>
The problem is a clash of z-index ranges. Vuetify uses z-index ranges 0-10 while leaflet uses the range 100-1100. Fortunately, the z-index of a child element is relative to the z-index of their parent.
I advice you to give l-map a z-index of 0 like this.
<l-map
:center="center"
:zoom="zoom"
#click.right="mapRclicked"
ref="map"
style="z-index: 0; height: 50vh; width: 50vh"
>
This will automatically bring your component in line with all of Vuetify z-indexes. In contrast, #bgsuello workaround requires that you modify the z-index of every Vuetify component that may conflict with the map, including other dialogs, menus, animations, tabs, toolbars, snackbars...
Edit: This is an outdated answer.
see #Javier answer below as pointed out by #ondrejsv on comment.
It does not work anymore at least in Vuetify 2.1.9 and Vue 2.6.x. The solution by Javier seems to work.
Increase the z-index style property of your dialog.
<v-dialog style="z-index:9999;"
... rest of your code ...
I find it quite practical to wrap the map in an image, like this
<v-img
height="100%"
width="100%">
<l-map>
...
</l-map>
</v-img>
This way there is no need to do anything with the z-index.
I am on Vue2.x + Vuetify + Vue2leaflet.
I tried many things and finally what worked for me was to cover the with a . My code reads as :
<v-lazy>
<v-img>
<l-map>
.... rest of the code
</l-map>
</v-img>
</v-lazy>
This takes inputs on v-lazy from https://medium.com/#elralimi.lamia/leaflet-vuejs-vuetify-map-not-showing-well-in-a-modal-with-grey-parts-9a5d551ea472. v-img was suggested by geomuc in the above response.
Other options that I tried but failed were: this.map.invalidateSize(); , this.map.remove();, this.$nextTick(() => {...}, z-index.
With Vue.js, when I delete a reply, I use a "transition-group" to fadeout the reply.
However, if I'm changing the reply page, I also see the fadeout.
How can I disable the fadeout of replies when I change the replies page ?
<transition-group name="list" tag="div">
<div v-for="(reply, index) in items" :key="reply.id">
<reply :data="reply" #deleted="remove(index)"></reply>
</div>
</transition-group>
<paginator :dataSet="dataSet" #updated="fetch"></paginator>
css :
.list-enter, .list-leave-to {
transition: all 0.5s;
opacity: 0;
}
Make the <transition-group> name="list" a property that reacts to data with :name="animToUse"
Put animToUse as a property on data
Change animToUse to a non transition whenever you don't want the transition
If you are using vue-router see it's docs about transitions: Route-Based Dynamic Transition
So I have an active Vue.js SPA. I want to animate the transitions between each 'page'. I have the router wrapped in the transition tag like so:
<transition name="example">
<router-view></router-view>
</transition>
I then apply some css like so:
.example-enter, .example-leave-to{
opacity:0;
}
.example-leave, .example-enter-to{
opacity:1;
}
.example-enter-active, .example-leave-active{
transition: opacity 500ms;
}
What this does though, is it fades in the view, but when it exists, the new view comes up from the bottom, rather than just fading out, and fading in. So what am I missing here? Is it because I wrapped the router-view in the transition tag?
Nevermind, I figured it out. on the example-leave, example-enter-to needs to be changed to opacity 0.