CSS animation only triggers upon first creation

Question

This is my first project using Vuejs.

I've got my main component. In my main component I've got a data variable that is an array. For example:

export default {
    name: 'example-component',
    data() {
        return {
            options: [
                {
                    text: {
                        nl: 'Jan',
                        en: 'John',
                    },
                    action: 'x1',
                },{
                    text: {
                        nl: 'Jansen',
                        en: 'Doe',
                    },
                    action: 'x2',
                },
            ],
        }
    },
}

In my template for this <example-component> I'm using a v-for loop inside of another component. Like shown below:

<my-other-component v-for="option in options" v-on:click.native="select(option.action)"
    :key="option.id"></my-other-component>

This seems to work fine.

<my-other-component> has an animation for when it appears on the screen for the first time.

In the methods section of my example-component there's a method that sometimes empties the options array and re-populates it, with different objects, of course. If this method were to run now, the first two options would not have this animation, but a third, fourth, fifth, etc would.

So it appears as though this animation would trigger upon the first creation of a specific index in the options array.

Does anyone know why this is and how I could fix this issue?

PS: My (relevant) CSS:

.option {
    animation-timing-function: linear;
    animation-name: option;
    animation-duration: 2.5s;
}

@-webkit-keyframes option{
    0% { opacity: 0; }
    75% { opacity: 0; }
    100% { opacity: 1; }
}

-

EDIT 1:

Adding animation-iteration-count: infinite does not solve the issue. It simply repeats the animation. (-> The 'options' disappear and reappear every 2.5s)

EDIT 2:

I have tried to fiddle around a bit. It seems to have to do something with timing. If there's enough time between the deleting op options and adding them again the animation seems to work fine.

Also, I have tried different ways of emptying my array, IE:

this.options = [];
this.options.length = 0;
this.options.splice(0, this.options.length);
// And all the other goodness

But they all don't seem to affect this issue.

In the provided code snippet your options have no id and the :key attribute doesn't work as expected. You must provide different value in each :key — Slim
– Slim, Commented Jul 26, 2017 at 8:42
This worked. But it seems strange, following the theory. I guess my 'logical' thinking wasn't as logical as I thought. Thanks! — Wouter
– Wouter, Commented Jul 26, 2017 at 11:27

tony19 · Accepted Answer · 2022-07-15 05:56:57Z

3

https://v2.vuejs.org/v2/guide/list.html#Components-and-v-for

In 2.2.0+, when using v-for with a component, a key is now required.

When Vue is updating a list of elements rendered with v-for, it by default uses an “in-place patch” strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will simply patch each element in-place and make sure it reflects what should be rendered at that particular index.

To give Vue a hint so that it can track each node’s identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item. An ideal value for key would be the unique id of each item.

Basicly, if you don't give each data object in your loop a unique ID and bind it to the element that is being looped, Vue will simply "patch" the data when it changes and won't touch the DOM.

edited Jul 15, 2022 at 5:56

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jul 26, 2017 at 11:28

Rainner

5893 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wouter Over a year ago

Wow. I didn't think about that. It solved the issue for me

JDewitt · Accepted Answer · 2017-07-25 22:03:48Z

1

If your animation is tied to a class, shouldn't toggling the class re-fire the animation?

answered Jul 25, 2017 at 22:03

JDewitt

5472 silver badges9 bronze badges

2 Comments

Wouter Over a year ago

Interesting thought. However, if I were to empty the array (= removing all the <my-other-component> instances) and repopulate the array again, shouldn't it be separate from class-toggling? Also, if I add a third item, later it gets animated in.

JDewitt Over a year ago

Maybe I am not properly understanding the problem without a demo.

K K · Accepted Answer · 2017-07-25 16:48:42Z

0

Try adding this CSS property in the CSS rule:

animation-iteration-count:infinite;

Here is the reference if you need more details: https://developer.mozilla.org/en/docs/Web/CSS/animation-iteration-count

answered Jul 25, 2017 at 16:48

K K

18.2k4 gold badges33 silver badges39 bronze badges

1 Comment

Wouter Over a year ago

I tried it. But -like I expected- this repeats my animation. So every two and a half seconds my 'options' disappear and reappear again.

Collectives™ on Stack Overflow

CSS animation only triggers upon first creation

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related