How to reference CSS animation with Javascript?

Question

I have a css animation that slides in a title when a page loads. How do I make it so that the Title will Slide out when I click a link, and the next Title will slide in? (Using Javascript)

It is most likely very simple but I am very new to this.

Have a class trigger the animation, and apply the class dynamically with JavaScript: `element.classList.add('example-animation-class')` — gyre, Mar 27 '17 at 04:07
I wonder if a `transition` is a better fit than an animation for a simple "slide" effect — Jaromanda X, Mar 27 '17 at 04:11

score 0 · Answer 1 · answered Mar 27 '17 at 06:49

As you have not provided any code, i have no codebase to develop upon, so have created a sample demonstrating iterating titles. You can use your existing slide animation on top of this to get your desired output.

HTML
<div id="titleHolder"></div>

CSS

.title{
  font-size:18px;
  cursor:pointer
}

.hidden{
  display:none;
}

JavaScript

const titles = ['StackOverflow', 'StackExchange', 'AskDifferent', 'Ask Ubuntu'];
const titlesLenght = titles.length;

const getTitleDomId = (title, index) => `${title}-${index}`;

const getTitleDom = (title, index) => `<span class="title ${index === 0 ? '' : 'hidden'}" id="${getTitleDomId(title, index)}" onclick="slideNext(${index}, ${index === titlesLenght -1 ? 0 : index+1});">${title}</span>`;

window.slideNext = (index, nextIndex) => {
  document.getElementById(getTitleDomId(titles[index], index)).style.display = 'none';
  document.getElementById(getTitleDomId(titles[nextIndex], nextIndex)).style.display = 'block';
};

for (let i = 0; i < titlesLenght; i++) {
  document.getElementById('titleHolder').innerHTML += getTitleDom(titles[i], i);
}

Link to jsFiddle

Make sure you supply your code with question for faster and more relevant answers.

How to reference CSS animation with Javascript?

1 Answers1