Text Rotator with Transitions

Hi people,

I have openned an tick on github about possible bug on transtions, but seems, the staff there does not care…

Anyway, I have an simple text rotator, and was willing add some effects using transitions, for data I have:

	rotateindex: 0,
	rotate: [
		{
			item: 0,
			text: 'Some item 1',
			name: 'zoom',
			enter: 'zoomIn',
			out: 'zoomOut',
			color: '',
			duration: 4000
		},
		{
			item: 1,
			text: 'Another item 2',
			name: 'zoom',
			enter: 'zoomIn',
			out: 'zoomOut',
			color: '',
			duration: 4000
		},
		{
			item: 2,
			text: 'There more items',
			name: 'zoom',
			enter: 'zoomIn',
			out: 'zoomOut',
			color: '',
			duration: 3500
		},
		{
			item: 3,
			text: 'Was think is about (parentesis) and seems is not... - not show this one',
			name: 'zoom',
			enter: 'zoomIn',
			out: 'zoomOut',
			color: '',
			duration: 4000
		},
		{
			item: 4,
			text: 'This show without animation',
			name: 'zoom',
			enter: 'zoomIn',
			out: 'zoomOut',
			color: '',
			duration: 4000
		},
		{
			item: 5,
			text: 'Another Curious thing is use / then / seems / not / working',
			name: 'zoom',
			enter: 'zoomIn',
			out: 'zoomOut',
			color: '',
			duration: 4000
		}
	]
};

Then I have did an Method:

textRotate() {
	this.rotateindex += 1;
	if (this.rotateindex >= this.rotate.length) {
		this.rotateindex = 0;
	}
	// For debug
	console.log(this.rotateindex);
	console.log(this.rotate[this.rotateindex].text);

And call it on mounted:

	setInterval(() => {
		this.textRotate();
	}, this.rotate[this.rotateindex].duration);

Timer come from Json becoming dynamic., for template on first approach, have did:

	<transition appear :name="rotate[rotateindex].name" :enter-class="rotate[rotateindex].enter"  :leave-active-class="rotate[rotateindex].out" mode="out-in">
		<p class="caption" :key="rotateindex">{{ rotate[rotateindex].text }}</p>
	</transition>

With the code above using the package:

Vue Animate

Got some animations, since the key skip (read variable and show blank) some data (at first time was think is issue with / and ( but not is), or in another words have skipped the json 3 and 5 (no idea why)…

Using the .sync then data is read but there’s no animation, example:

	<transition appear :name="rotate[rotateindex].name" :enter-class="rotate[rotateindex].enter"  :leave-active-class="rotate[rotateindex].out" mode="out-in">
		<p class="caption" :key="rotateindex.sync">{{ rotate[rotateindex].text }}</p>
	</transition>

With .sync all data from json is read and show correctly, but without animations…
(Does not occours the enter / leave class added events on)

Someone can point me where I am doing something wrong?

PS.: Have tested using nuxt.
PS2.: Using Animate.css too

:key="rotateindex.sync"

Hi. This part seems weird to me, as rotateindex is a Number type. Is this supposedly working?

If you have a codepen or something else to showcase your code, that would be more helpful for us to debug.

Thank you for the reply.

I will add an codepen as soon Yahoo receive the link of password reset from codepen, seems Yahoo is getting trouble today on mail delivery.

Was not figure out how to get nuxt working on codepen, then used codesandbox, here is the link:

Example of the Text Rotator Issue

1 Like

After post the first try with .sync, started the second example without .sync.

The wierd thing is that does not skip items on codesandbox, but still without transitions.

PS.: Have noticed the package.json is using an old version, I will update the packages.

Using .sync from documentation:

https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier

But, that make a mutation and animation does not occours because that.

For the animation in the codesandbox, have you added the css style needed for the animation?

Good point!!

On codesandbox, have added as dependency but not in nuxt.config.js, by the way, have update now with:

css: [
    'animate.css/animate.min.css'
  ],

Unfortunately does not work.

You are missing a keyword on the animation names, you currently have:

{
    item: 0,
    text: 'Some item 1',
    name: 'zoom',
    enter: 'zoomIn',
    out: 'zoomOut',
    color: '',
    duration: 4000
},

While it should be:

{
    item: 0,
    text: 'Some item 1',
    name: 'zoom',
    enter: 'animated zoomIn',
    out: 'animated zoomOut',
    color: '',
    duration: 4000
},

Notice the change on the enter and out properties.