javascript - 如何用Javascript引用CSS动画？

Question

我有一个 css 动画，可以在页面加载时在标题中滑动。如何做到单击链接时标题会滑出，而下一个标题会滑入？ (使用 JavaScript)

这很可能非常简单，但我对此很陌生。

Answer 1

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);
}

链接到jsFiddle

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