古诗词淡入淡出动画

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

诗词展示

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

js 复制代码
<div className="hp_poem">
  {[
    "滚滚长江东逝水",
    "浪花淘尽英雄",
    "是非成败转头空",
    "青山依旧在",
    "几度夕阳红",
    "白发渔樵江渚上",
    "惯看秋月春风",
    "一壶浊酒喜相逢",
    "古今多少事",
    "都付笑谈中",
  ].map((line, index) => (
    <div key={index} className={`line ${index <= fadeIndex ? "fade-in" : ""}`}>
      {line}
    </div>
  ))}
</div>

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

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

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

  • horizontal-tb:默认值。文本是水平方向(horizontal)的,元素是从上往下(tb:top-bottom)的;
  • vertical-rl:文本是垂直方向(vertical)的,元素是从右往左(rl:right-left)的。适合古诗词展示
  • vertical-lr:文本是垂直方向(vertical)的,元素是从左往右(lr:left-right)的。
css 复制代码
.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():贝塞尔曲线函数。
    • steps(): 步进函数。
css 复制代码
.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 添加动画样式。

js 复制代码
const [fadeIndex, setFadeIndex] = useState(0);

useEffect(() => {
  const timer = setInterval(() => {
    setFadeIndex((prevIndex: number) => prevIndex + 1);
  }, 1000);

  return () => clearInterval(timer);
}, []);

淡出动画

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

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

动画效果如下所示:

参考文档:

相关推荐
white-persist7 分钟前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师1 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang1 小时前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_1 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含1 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端1 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友1 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
子兮曰2 小时前
npm workspace 深度解析:与 pnpm workspace 和 Lerna 的全面对比
前端·javascript·npm