古诗词淡入淡出动画

2024-04-21 00:03| 来源: 网络整理| 查看: 265

主要介绍了古诗词的展示方式，使用writing-mode属性；还介绍了淡入淡出动画的实现，使用animation属性

诗词展示

正常情况下，文本内容都是横向展示，而且是从左至右展示的。

{[ "滚滚长江东逝水", "浪花淘尽英雄", "是非成败转头空", "青山依旧在", "几度夕阳红", "白发渔樵江渚上", "惯看秋月春风", "一壶浊酒喜相逢", "古今多少事", "都付笑谈中", ].map((line, index) => ( {line} ))}

但是古诗词展示是纵向的，从右到左展示的，和对联一样。

需要使用writing-mode属性，很强大的一个 css 属性。

常用的有如下几个值，具体可查看官网介绍writing-mode：

horizontal-tb：默认值。文本是水平方向(horizontal)的，元素是从上往下(tb:top-bottom)的； vertical-rl：文本是垂直方向(vertical)的，元素是从右往左(rl:right-left)的。适合古诗词展示； vertical-lr：文本是垂直方向(vertical)的，元素是从左往右(lr:left-right)的。 .hp_poem { /* 一行代码就可以解决了 */ writing-mode: vertical-rl; }

实现效果如下图所示：

淡入动画

设置初始的透明度为 0，然后通过过渡效果 animation 设置每一行的透明度变化，从而平滑地展示当前行的诗词内容。

animation动画功能很强大，也很实用，建议前端小伙伴们都好好学一下！！！

可以根据自己的需求调整样式，动态修改动画持续时间、调整过渡效果的速度曲线等。

animation-name：动画名称，和@keyframes后的名称一致 animation-duration：动画时长 animation-timing-function：动画时间函数，用于指定动画过程中的速度变化。常用的值如下所示： ease：默认值，表示动画在开始和结束时较慢，而在中间阶段较快。 linear：表示动画在整个过程中保持匀速运动。 ease-in：表示动画在开始时较慢，然后逐渐加速。 ease-out：表示动画在结束时减速，开始时较快。 ease-in-out：表示动画在开始和结束时较慢，中间阶段较快。 cubic-bezier()：贝塞尔曲线函数，在线调试地址为cubic-bezier.com。 steps()：步进函数。 .line { opacity: 0; animation-fill-mode: forwards; } /* 淡入动画 */ .fade-in { animation-name: fade-in; animation-duration: 1s; animation-timing-function: ease-in; } /* 定义动画效果 */ @keyframes fade-in { from { opacity: 0; // 初始透明度为0 } to { opacity: 1; // 结束透明度为1 } }

上述代码只是展示了一列的数据动画效果，要实现逐行展示效果，还得使用定时器完成，间隔 1s 添加动画样式。

const [fadeIndex, setFadeIndex] = useState(0); useEffect(() => { const timer = setInterval(() => { setFadeIndex((prevIndex: number) => prevIndex + 1); }, 1000); return () => clearInterval(timer); }, []); 淡出动画

淡出效果和淡入效果相反，透明度变化为 1 到 0，其他的基本一样，就不重复了。

/* 淡出动画 */ .fade-out { animation-name: fade-out; animation-duration: 1s; animation-timing-function: ease-out; } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }

动画效果如下所示：

参考文档：

writing-mode animation

【本文地址】

公司简介

联系我们