想问下两个 div 如何反复重复出现

[xiaohantx]

<div>
  <div>1</div>
  <div>2</div>
</div>

需求是这样的，刚进来的时候显示 2，最外层的 div 有个 overflow:hidden;然后隔一会触发 1 从上往下停留在 2 的位置，2 也会同时从原来位置往下到外面，再过一会，2 从上往下到 1 位置，1 从原来位置往下到外面，以此循环

[learnshare]

看起来是要做滚动动画，两个 div 放完全一致的内容，然后实现循环滚动的效果？

这种状况通常建议使用 transform: translate*() 的 animation 实现，具体来讲是
1. 三层结构：外部容器 > 内部容器（ transform 的目标） > 滚动内容（重复多次）
2. 定义动画：内部容器 translate* 0~-50%（第二个值 = 100% / 内容重复次数）
3. 重复播放

并不需要考虑 DOM 的删除和插入，这么做反而需要复杂的位置计算和处理逻辑。

参考示例 https://codepen.io/web-app-dev/pen/BaLzJeB

示例中可以看到，每个动画周期结束后，瞬间跳回了第一帧（ 1-2 切换为 1-1 ）

[liyang5945]

这玩意都不用写 js，用 css3 animate 就行

[liyang5945]

我写了个往返的运动的动画，不知道是不是你想要的效果： https://codepen.io/liyang5945/pen/oNzLprM

[xiaohantx]

@learnshare 不好意思可能没说清楚，以此循环是指后续动画我想到是这样到一个交互，并不是指动画一直播放，需要触发条件，比如接口调用后如果成功，执行以此动画，这时候这里有旧消息 2，然后调用完接口新消息 1 会出来，2 会下去消失

[xiaohantx]

@liyang5945 下去的时候是类似效果，但是没有返回的效果，另外动画是需要一个触发

[cmdOptionKana]

@xiaohantx 看 3 楼的代码，怎样从上往下，怎样从下往上，都有很清晰的代码，如果要触发，就直接在触发时用 js 改 css class 即可。

[learnshare]

@xiaohantx
@cmdOptionKana
没错，来回播放可以修改关键帧，或者设置动画来回播放；按需启动可以使用 JS 修改元素的 class

[yaphets666]

这不是轮播图吗兄弟?

[xiaohantx]

@cmdOptionKana
@learnshare
因为没有从下往上过度，我看从上往下，第一次是没问题，主要就是第二次因为界面已经停留在 div1 了，想 div2 继续从 div1 上面下来。。

[xiaohantx]

@yaphets666 是。。但是觉得用轮播做太麻烦，有没有稍微简单点的方式

[yaphets666]

@xiaohantx 就用上面那个老哥的代码 vue 这边是可以动态绑定一个 class 让他动就绑上去 不让他动就不绑

[xiaohantx]

@learnshare
@cmdOptionKana
没有衔接的话就会感觉卡一下

[xiaohantx]

@yaphets666 但是第一次是 div1 在 div2 上面下来，上面有内容，第二次要 div2 从 div1 上面下来，第二次之后这个衔接没看明白，第一次是没问题的，，，动画能做出来我知道

[xiaohantx]

@yaphets666 就是轮播图那种一直下一页到最后一页时候，继续下一页时候第一页衔接到效果（但是不是通过回弹到第一页）

[zxCoder]

@liyang5945 css 好神奇。。。

[liyang5945]

我懂你的意思了，就是一个无限循环的轮播图呗，使用 swiper 这个 js 插件可以达到你的效果： https://www.swiper.com.cn/demo/index.html

[yaphets666]

@xiaohantx 数组 arr[1,2,3,4] 四张图片对吧 实际上轮播图是五张 是这样的[1,2,3,4,1],播放到'4'也就是 arr[3]的时候下一张就是'1',也就是 arr[4]. 然后瞬间把当前播放张换成 arr[0]. 由于 arr[4]和 arr[0]的图片是一样的 所以说视觉效果上是观察不到这个动作的 这样就无缝循环了

[xiaohantx]

@liyang5945 我是知道这个最终解决方案，但是因为不是属于轮播图，其实是消息提示样式，类似轮播图，而且就两个，所以我在想有没有比较简单点到方式，或者通过每次修改 dom 节点来做到。。

[xiaohantx]

@yaphets666 那这个方案好像是不太适合，因为始终只有一个新的消息，一个旧的消息，新的消息永远从上出现，旧的消息永远从出现往下，过程没有两条同样内容的消息，所以也就感觉不太适合这个方案

[yaphets666]

@xiaohantx 视觉效果上就是 一个新消息 一个旧消息 1 和 1 你能看出不同吗?当然咱们自己写代码是知道 arr[0]和 arr[4]

[ArthurSS]

尽量把代码逻辑和视觉逻辑抽开思考吧，就像 17 楼说的一样

[ArthurSS]

https://cn.vuejs.org/v2/guide/transitions.html
用 vue 的话，可以看一下自带的 transition 的钩子，单纯操作数据，把视觉效果单独设置

[lllllliu]

html <marquee>

[xiaohantx]

@lllllliu marquee 已经废弃了把

[xiaohantx]

@liyang5945 修改了下，好像这种思路的话就可以比较简单解决。。https://codepen.io/xiaohantx/pen/abmZYNg?editors=1111

[xiaohantx]

@xiaohantx 好像也不对。。。因为新消息只推一次。。