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

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

如何用Javascript引用CSS动画？

1 个答案: