Stack Overflow
Stack Overflow

Questions tagged [vuejs-transition]

31 questions
9
votes
1 answer

Transitioning multiple child elements with one wrapper

I want to set multiple transitions (on separate child elements) inside one parent v-if state change. For example when I display a modal I want the background blur to fadeIn (using opacity) and the modal content to slideIn (using transition or…
korun
  • 2,211
  • 1
  • 16
  • 12
3
votes
1 answer

Vuejs list reorder doesn't trigger transitions

I've been doing some vuejs for almost a year now and I never really got animations and transitions to work, it seems very unclear to me how all this is supposed to work and today I decided to try and finally understand them but once again I am…
manu
  • 1,059
  • 1
  • 16
  • 33
3
votes
1 answer

Apply vuejs transition-group to Bootstrap grid

I am trying to apply vuejs transitions to Bootstrap grids but it totally screw up the grid system because the transition-group modifies the DOM and adds a new tag between the row and col-md-6 tags. example:
Gabz
  • 77
  • 1
  • 11
2
votes
2 answers

How to split CodePen into webpacked Components?

I am following this CodePen, and trying to fit it into the default VueJS 2.0 Boilerplate. This is how I would split the files up: App.vue main.js components/Transitions.vue components/Controls.vue components/Page.vue I am having huge problems…
Stephan Kristyn
  • 15,015
  • 14
  • 88
  • 147
2
votes
0 answers

How to clean cache from a vue.js website?

So i've built a website with a vue.js. It's deployed on AWS s3 bucket that lies behind a CloudFront distribution. Recently i've found out that some users are seeing 2 week old version of the website. This is a big issue since i am updating website…
DaX
  • 94
  • 1
  • 11
2
votes
1 answer

VueJS transition slider

I have a form with three steps. And each step should transition from side to side on click of prey/next. The problem is, that the transitions aren't being applied correctly after a direction change. Does anyone know why vue isn't adding the correct…
Chris
  • 419
  • 2
  • 16
2
votes
0 answers

How can I animate an item in a grid to expand to full screen when clicked? [VueJS]

I have a "grid" of blog posts in a Vue app that need to be animated on click to expand to the full screen as a single post view. It needs to grow from the same position the "thumbnail" or "preview" was in the grid when it expands to the full screen…
Zachary Wright
  • 21
  • 3
2
votes
1 answer

vuejs animation issue on removing item of list

I am trying to remove a list item with some animation, issue is if the removed item is the last one it works fine, but if I remove some item other than the last one animation is not working properly, see the fiddle here:…
coure2011
  • 40,286
  • 83
  • 216
  • 349
1
vote
1 answer

Vue JS transition using in v for

Im new to vuejs and I have problem. look my code Template:
1
vote
1 answer

Paginated async Component doesn't trigger setup() on route change

I have a paginated component. The async setup() method is pulling data from an API to populate the page. It works fine when the route is directly loaded, but when I change the route to a different page slug (eg. clicking a router-link), the…
samuirai
  • 762
  • 1
  • 9
  • 25
1
vote
2 answers

props keep showing as $attrs in VUE DEV TOOLS

enter image description hereenter image description here My props keep showing as $attrs in VUE DEV TOOLS I have tried disabling attrs using inheritAttrs: false and v-bind="$attrs",does not work // props :showLoadMoreButton="load" data() { …
Swati
  • 11
  • 5
1
vote
1 answer

Vue3, which repository to use, vue3, or vue-next

So, This is probably a stupid question, but I just can't find an answer anywhere. From the VueJS docs, in the migration steps they say I should change my package.json to use: vue: "^3.1.0" But in the introduction, they say I should use: vue-next:…
L03TJ3
  • 37
  • 8
1
vote
1 answer

Vuejs - transition-group carousel animation one item at a time

I'm trying to implement exactly this carousel/slide effect using Vue transition-group: As you can see, they are animating one list item (step) at a time where the previous step goes up and the current one goes up with its content following the…
Luis Filipe
  • 25
  • 1
  • 5
1
vote
3 answers

Animate adding/deleting items from todo list using transition

I have a todo list that is based on the example provided in the official vuejs documentation. Example: https://jsfiddle.net/87Lfbzng/
1
vote
0 answers

Vue + Vuetify transition-group list animation issue when removing last item

I am trying to get transition-group to work with my layout. It mostly works, except when removing the last item in a long list with a scroll bar. When I remove the last item, the space it occupied does not shrink gracefully, it waits until the…
Morrowless
  • 6,856
  • 11
  • 51
  • 81
1
2 3