Stack Overflow
Stack Overflow

Questions tagged [vue-transitions]

101 questions
1
vote
1 answer

Vue deferred transition between tow elements

Recently, I read a svelte tutorial on Deferred transitions. With few lines of code it was easy to achieve the transition as shown in GIF below. I am curious on how to implement the same effect using Vue transitions. I read docs on Vue Transition and…
Pavan Kumar
  • 1,715
  • 1
  • 24
  • 48
1
vote
1 answer

Keep alive stops working when adding div with :key

I am currently facing an issue where the stops working after adding a :key to the parent
. This
and also the :key is needed, otherwise the won't work. Anyone got a solution for that? Sorry i am not able to…
MrSpt
  • 499
  • 3
  • 16
1
vote
1 answer

Smooth out animation with custom dropdown input with Vue transition animations

Edit: I've built this on codesandbox. Some of the implementations aren't working for whatever reason (it doesn't like my img src routes) CodeSandbox Link So I am trying to build a responsive navbar that has a couple custom dropdowns. Intitally I…
LovelyAndy
  • 841
  • 8
  • 22
1
vote
0 answers

vue transition with animate.css not working as expected with fadeInUp

For some reason animate.css is not working exactly how I expected it to. I have this component:
r3plica
  • 13,017
  • 23
  • 128
  • 290
1
vote
0 answers

Vue transition break focus on ios. How to fix?

I have button and textarea, which is invisible. When click on button textarea appears and is focused, the keyboard appears on ios(Safari), and the screen correctly scrolls to textarea. However, if I wrap textarea with transition component screen…
mikita
  • 11
  • 2
1
vote
0 answers

Vue Transition Group Animation - start v-move only after v-leave finishes

I would like to have the following flow: 5 items on a stack of notifications. 1 item is poped, so it enters on v-leave state, while the other 4 items don't animate at all. After item enters on v-leave state, the other 4 items animate to their new…
Igor Lira
  • 21
  • 2
1
vote
1 answer

VueJS 3 transition-group control parent size

I have a group of elements showing/hiding/rearranging with a transition group, nothing fancy. .cross-fade-leave-active { transition: transform $fadeSpeed ease-in-out, opacity $fadeSpeed ease-in-out; position:…
Randy Hall
  • 7,716
  • 16
  • 73
  • 151
1
vote
2 answers

Vue nested router-view leave transition doesn't run

I have a parent route with a nested child route. The router-view in the parent route (that the child loads into) is wrapped in a transition. My understanding is that this should transition the child in and out when entering/leaving the…
davidpmccormick
  • 198
  • 1
  • 12
1
vote
0 answers

vue 3 transition-group appear not working

I have this setup in my code:
  • The classes are not being applied, but they do exist. When I add them…
    Nachtfunke
    • 329
    • 1
    • 14
    1
    vote
    1 answer

    How to replicate the Material Ripple animation in Vuejs?

    I am trying to replicate the ripple effect from Material Design since the current app I am working on is going to get rid of Quasar; so I'm building all the elements from the ground up. This effect: I've watched a few videos doing this in just pure…
    LovelyAndy
    • 841
    • 8
    • 22
    1
    vote
    0 answers

    Why doesn't the Vue transition recognise the change in the array used, unless I reinitialise the array?

    I was just working my way through the vue transitions, and I came across one thing I don't understand. I want to display a list that keeps shuffling. For this I wrote the function shuffle(), which is called every 2000ms. At the end of the function,…
    okinava
    • 43
    • 1
    • 7
    1
    vote
    1 answer

    Why I need to set the image in position absolute when doing a slide-effect in VueJS?

    I'm new to VueJS. I spent the last two hours trying to animate a slider, and finally I found a solution, but I don't understand why I need to set my image in position absolute to have the slide effect using the transform: translate property. Can…
    Geeogee
    • 41
    • 5
    1
    vote
    1 answer

    Vue Transitions: Sidebar transitioning in but not out

    I have a Sidebar component that utilizes a transition element to slide the sidebar in and out whenever it is hidden and shown. It slides out just fine when it is toggled off, but whenever it is toggled on, it just pops in. Sidebar.vue