返回

原生JS实现翻页动画效果

前端

大家好，我是隐冬，今天用原生js给大家写一个翻页的效果。

首先完成页面的静态布局。html里面很简单，只有一个ul标签和一个button按钮。ul中的li是通过js动态生成的。

js先获取页面中的ul标签，然后循环生成10个li标签，每个li标签的内容是1到10的数字。

const ul = document.querySelector('ul');
for (let i = 1; i <= 10; i++) {
  const li = document.createElement('li');
  li.innerText = i;
  ul.appendChild(li);
}

接下来是重点，如何实现翻页效果。

我们先给ul标签添加一个class="flip-container"，然后在CSS中定义这个class的样式。

.flip-container {
  width: 200px;
  height: 200px;
  overflow: hidden;
  perspective: 1000px;
}

这个样式的作用是设置ul标签的宽度和高度，并隐藏溢出内容。perspective属性设置透视效果，使元素看起来有3D效果。

接下来，我们给li标签添加一个class="flip-item"，并在CSS中定义这个class的样式。

.flip-item {
  width: 100px;
  height: 100px;
  position: absolute;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 1s;
}

这个样式的作用是设置li标签的宽度和高度，并将其定位为绝对定位。backface-visibility属性隐藏元素的背面，使元素看起来只有一面。transform-style属性设置元素的变换样式，preserve-3d属性使元素在变换时保持3D效果。transition属性设置元素的过渡效果，transform 1s表示元素在1秒内完成变换。

最后，我们给button按钮添加一个事件监听器，当按钮被点击时，触发翻页效果。

const btn = document.querySelector('button');
btn.addEventListener('click', () => {
  ul.classList.toggle('flip');
});

这个代码的作用是给ul标签添加一个class="flip"，这个class在CSS中定义了翻页动画效果。

这就是如何使用纯JavaScript实现翻页动画效果。希望对大家有所帮助。