实现效果
简单思路
复制要切页的节点,利用 CSS 的 clip-path 属性对节点进行裁剪,将节点分成多个部分,每个部分分成上下两块(因为需要上下两块向中间扭曲变换),给各个块设置不同延时的平移旋转扭曲变换动画效果即可。
代码实现
const fronts = document.querySelectorAll('.front')
const backs = document.querySelectorAll('.back')
const n = fronts.length
const m = n / 2
const player = []
const keyframes = (num, n, isFront, isUp) => [
{
transform: isFront
? 'rotateY(0deg) skewY(0deg)'
: `rotateY(-120deg) skewY(${isUp ? '' : '-'}30deg) translateX(${100 / n}%)`,
transformOrigin: `${(100 / n) * (num + 1)}%`,
},
{
transform: isFront
? `rotateY(120deg) skewY(${isUp ? '-' : ''}30deg) translateX(-${100 / n}%)`
: 'rotateY(0deg) skewY(0deg)',
transformOrigin: `${(100 / n) * num}%`,
},
]
const options = {
duration: 1000,
fill: 'both',
}
const playAll = () => {
player.forEach(value => {
value.play()
})
}
for (let i = 0; i < n; i++) {
const j = Math.floor(i / 2)
fronts[i].style.clipPath = `inset(${i % 2 == 0 ? '0%' : '50%'} ${Math.floor(100 - (100 / m) * (j + 1))}% ${
i % 2 != 0 ? '0%' : '50%'
} ${Math.floor((100 / m) * j)}%)`
backs[i].style.clipPath = `inset(${i % 2 == 0 ? '0' : '50%'} ${Math.floor(100 - (100 / m) * (j + 1))}% ${
i % 2 != 0 ? '0%' : '50%'
} ${Math.floor((100 / m) * j)}%)`
player.push(
new Animation(
new KeyframeEffect(fronts[i], keyframes(j, m, true, i % 2 == 0), {
...options,
iterations: 0.75,
delay: (j < m / 2 ? m / 2 - 1 - j : j - m / 2) * 200,
}),
),
)
player.push(
new Animation(
new KeyframeEffect(backs[i], keyframes(j, m, false, i % 2 == 0), {
...options,
delay: (j < m / 2 ? m / 2 - 1 - j : j - m / 2) * 200,
}),
),
)
}
playAll()