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

帖子布局动画的实现思路

本帖最后由 马黑黑 于 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 = [
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
      ,
    ];
    let ele = aniAr; //取元素名称
    ele.style.transition = 'all 3s'; //设置单个动画所需时间
    ele.style.cssText += aniAr; //取动画描述并追加到元素的style样式
    idx ++; //计数器加1（以便进入下一个操作）
    //如果 idx 计数器小于 aniAr 数组总数，递归调用定时器（定时器调用此函数）
    if(idx < aniAr.length) setTimeout(goHome, 3000);
}

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

红影 发表于 2022-8-2 13:53

这个调配动画是在JS里实现的，比在CSS里做更简洁呢{:4_187:}

加林森 发表于 2022-8-2 14:49

来学习。

马黑黑 发表于 2022-8-2 17:10

红影 发表于 2022-8-2 13:53
这个调配动画是在JS里实现的，比在CSS里做更简洁呢

JS更灵活一些。不过行内有一个说法，能用HTML的就不用CSS，能用CSS的就不用JS

马黑黑 发表于 2022-8-2 17:11

加林森 发表于 2022-8-2 14:49
来学习。

希望学会了

加林森 发表于 2022-8-2 17:48

马黑黑 发表于 2022-8-2 17:11
希望学会了

还没有实践，要制作了才知道是怎么回事。

马黑黑 发表于 2022-8-2 17:54

加林森 发表于 2022-8-2 17:48
还没有实践，要制作了才知道是怎么回事。

对，要动动手

加林森 发表于 2022-8-2 18:10

马黑黑 发表于 2022-8-2 17:54
对，要动动手

嗯嗯，就是。

小辣椒 发表于 2022-8-2 20:27

这个好像要实践过才会领会{:4_173:}

红影 发表于 2022-8-2 20:32

马黑黑 发表于 2022-8-2 17:10
JS更灵活一些。不过行内有一个说法，能用HTML的就不用CSS，能用CSS的就不用JS

嗯，前者都更直接，但后者空间更大。

马黑黑 发表于 2022-8-2 21:07

红影 发表于 2022-8-2 20:32
嗯，前者都更直接，但后者空间更大。

所以根据需要，选择使用，多数时候它们会结合在一起

马黑黑 发表于 2022-8-2 21:08

小辣椒 发表于 2022-8-2 20:27
这个好像要实践过才会领会

实践是必须的

小辣椒 发表于 2022-8-2 21:12

马黑黑 发表于 2022-8-2 21:08
实践是必须的

黑黑，今天发的那个装拆的帖要你帮忙了

马黑黑 发表于 2022-8-2 21:21

小辣椒 发表于 2022-8-2 21:12
黑黑，今天发的那个装拆的帖要你帮忙了

我看了一下，去掉注释正常的
页: [1]
查看完整版本: 帖子布局动画的实现思路