这是一个创建于 1465 天前的主题，其中的信息可能已经有所发展或是发生改变。
<div>
<div>1</div>
<div>2</div>
</div>
需求是这样的，刚进来的时候显示 2，最外层的 div 有个 overflow:hidden;然后隔一会触发 1 从上往下停留在 2 的位置，2 也会同时从原来位置往下到外面，再过一会，2 从上往下到 1 位置，1 从原来位置往下到外面，以此循环
 |
1
learnshare 2020-12-08 12:15:42 +08:00
看起来是要做滚动动画，两个 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 ） |
 |
2
liyang5945 2020-12-08 12:17:02 +08:00
这玩意都不用写 js，用 css3 animate 就行
|
|
3
liyang5945 2020-12-08 12:29:23 +08:00  2
我写了个往返的运动的动画，不知道是不是你想要的效果： https://codepen.io/liyang5945/pen/oNzLprM
|
 |
4
xiaohantx OP @learnshare 不好意思可能没说清楚，以此循环是指后续动画我想到是这样到一个交互，并不是指动画一直播放，需要触发条件，比如接口调用后如果成功，执行以此动画，这时候这里有旧消息 2，然后调用完接口新消息 1 会出来，2 会下去消失
|
|
5
xiaohantx OP @liyang5945 下去的时候是类似效果，但是没有返回的效果，另外动画是需要一个触发
|
 |
6
cmdOptionKana 2020-12-08 12:41:05 +08:00
@xiaohantx 看 3 楼的代码，怎样从上往下，怎样从下往上，都有很清晰的代码，如果要触发，就直接在触发时用 js 改 css class 即可。
|
|
7
learnshare 2020-12-08 12:59:24 +08:00
|
 |
8
yaphets666 2020-12-08 13:27:51 +08:00
这不是轮播图吗兄弟?
|
|
9
xiaohantx OP |
|
10
xiaohantx OP @yaphets666 是。。但是觉得用轮播做太麻烦，有没有稍微简单点的方式
|
|
11
yaphets666 2020-12-08 13:39:41 +08:00
@xiaohantx 就用上面那个老哥的代码 vue 这边是可以动态绑定一个 class 让他动就绑上去 不让他动就不绑
|
|
12
xiaohantx OP |
|
13
xiaohantx OP @yaphets666 但是第一次是 div1 在 div2 上面下来，上面有内容，第二次要 div2 从 div1 上面下来，第二次之后这个衔接没看明白，第一次是没问题的，，，动画能做出来我知道
|
|
14
xiaohantx OP @yaphets666 就是轮播图那种一直下一页到最后一页时候，继续下一页时候第一页衔接到效果（但是不是通过回弹到第一页）
|
 |
15
zxCoder 2020-12-08 13:48:12 +08:00
@liyang5945 css 好神奇。。。
|
|
16
liyang5945 2020-12-08 13:50:25 +08:00
我懂你的意思了，就是一个无限循环的轮播图呗，使用 swiper 这个 js 插件可以达到你的效果： https://www.swiper.com.cn/demo/index.html
|
|
17
yaphets666 2020-12-08 13:51:12 +08:00
@xiaohantx 数组 arr[1,2,3,4] 四张图片对吧 实际上轮播图是五张 是这样的[1,2,3,4,1],播放到'4'也就是 arr[3]的时候下一张就是'1',也就是 arr[4]. 然后瞬间把当前播放张换成 arr[0]. 由于 arr[4]和 arr[0]的图片是一样的 所以说视觉效果上是观察不到这个动作的 这样就无缝循环了
|
|
18
xiaohantx OP @liyang5945 我是知道这个最终解决方案，但是因为不是属于轮播图，其实是消息提示样式，类似轮播图，而且就两个，所以我在想有没有比较简单点到方式，或者通过每次修改 dom 节点来做到。。
|
|
19
xiaohantx OP @yaphets666 那这个方案好像是不太适合，因为始终只有一个新的消息，一个旧的消息，新的消息永远从上出现，旧的消息永远从出现往下，过程没有两条同样内容的消息，所以也就感觉不太适合这个方案
|
|
20
yaphets666 2020-12-08 13:56:04 +08:00
@xiaohantx 视觉效果上就是 一个新消息 一个旧消息 1 和 1 你能看出不同吗?当然咱们自己写代码是知道 arr[0]和 arr[4]
|
 |
21
ArthurSS 2020-12-08 14:00:34 +08:00
尽量把代码逻辑和视觉逻辑抽开思考吧，就像 17 楼说的一样
|
|
22
ArthurSS 2020-12-08 14:03:36 +08:00
https://cn.vuejs.org/v2/guide/transitions.html
用 vue 的话，可以看一下自带的 transition 的钩子，单纯操作数据，把视觉效果单独设置 |
 |
23
lllllliu 2020-12-08 14:06:44 +08:00
html <marquee>
|
|
25
xiaohantx OP @liyang5945 修改了下，好像这种思路的话就可以比较简单解决。。https://codepen.io/xiaohantx/pen/abmZYNg?editors=1111
|
Select Language