帖子布局动画的实现思路

马黑黑 · 发表于 2022-8-2 13:29

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-8-2 13:35 编辑

假设我们的帖子内部的元素需要以动画的形式布局，令其逐一各赴其位，思路可以是这样：

首先，这些元素都需要进行定位（建议绝对定位）、设置有left、top或right、bottom值。初始时，预设它们在指定的地方，并设为不可见（opacity: 0）。

其次，这些元素都设有 id 标识，便于在JS中对之直接操作。

第三，编写一个布局函数，通过定时器对它的调用逐一将元素送往各处。该函数直接操纵拥有 id="id名称" 的元素，这里假设有三个，mama，son，daughter。

let idx = 0; //运动计数须放在函数之外
setTimeout(goHome, 3000); //首次通过定时器调用布局函数

function goHome() {
//预设动画数组：元素 + 动画描述
let aniAr = [
      [mama, 'transform: rotate(45deg)'],
      [son, 'opacity: 1'],
      [son, 'left: 800px'],
      [son, 'top: 20px'],
      [daughter, 'opacity: 1'],
      [daughter, 'left: 20px'],
      [daughter, 'top: 20px'],
      [mama, 'top: 20px'],
      [mama, 'transform: rotate(0deg)'],
];
let ele = aniAr[idx][0]; //取元素名称
ele.style.transition = 'all 3s'; //设置单个动画所需时间
ele.style.cssText += aniAr[idx][1]; //取动画描述并追加到元素的style样式
idx ++; //计数器加1（以便进入下一个操作）
//如果 idx 计数器小于 aniAr 数组总数，递归调用定时器（定时器调用此函数）
if(idx < aniAr.length) setTimeout(goHome, 3000);
}

应用实例请移步：巫娜·春城孤鹤 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! (huachaowang.com)