如何使用 Javascript 引用 CSS 动画

Question

我有一个 css 动画，当页面加载时，它会在标题中滑动。如何使标题在我单击链接时滑出，而下一个标题将滑入？(使用Javascript(

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

Answer 1

由于您没有提供任何代码，因此我没有代码库可以开发， 因此创建了一个演示迭代标题的示例。您可以使用 您现有的幻灯片动画在此之上，以获得您想要的 输出。

.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

确保在代码中提供问题，以获得更快、更相关的答案。