V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
xiaohantx
V2EX  ›  问与答

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

  •  
  •   xiaohantx · 2020-12-08 11:45:35 +08:00 · 1527 次点击
    这是一个创建于 1206 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <div>
      <div>1</div>
      <div>2</div>
    </div>
    

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

    26 条回复    2020-12-08 14:29:47 +08:00
    learnshare
        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 )
    liyang5945
        2
    liyang5945  
       2020-12-08 12:17:02 +08:00
    这玩意都不用写 js,用 css3 animate 就行
    liyang5945
        3
    liyang5945  
       2020-12-08 12:29:23 +08:00   ❤️ 2
    我写了个往返的运动的动画,不知道是不是你想要的效果: https://codepen.io/liyang5945/pen/oNzLprM
    xiaohantx
        4
    xiaohantx  
    OP
       2020-12-08 12:32:25 +08:00
    @learnshare 不好意思可能没说清楚,以此循环是指后续动画我想到是这样到一个交互,并不是指动画一直播放,需要触发条件,比如接口调用后如果成功,执行以此动画,这时候这里有旧消息 2,然后调用完接口新消息 1 会出来,2 会下去消失
    xiaohantx
        5
    xiaohantx  
    OP
       2020-12-08 12:33:12 +08:00
    @liyang5945 下去的时候是类似效果,但是没有返回的效果,另外动画是需要一个触发
    cmdOptionKana
        6
    cmdOptionKana  
       2020-12-08 12:41:05 +08:00
    @xiaohantx 看 3 楼的代码,怎样从上往下,怎样从下往上,都有很清晰的代码,如果要触发,就直接在触发时用 js 改 css class 即可。
    learnshare
        7
    learnshare  
       2020-12-08 12:59:24 +08:00
    @xiaohantx
    @cmdOptionKana
    没错,来回播放可以修改关键帧,或者设置动画来回播放;按需启动可以使用 JS 修改元素的 class
    yaphets666
        8
    yaphets666  
       2020-12-08 13:27:51 +08:00
    这不是轮播图吗兄弟?
    xiaohantx
        9
    xiaohantx  
    OP
       2020-12-08 13:37:41 +08:00
    @cmdOptionKana
    @learnshare
    因为没有从下往上过度,我看从上往下,第一次是没问题,主要就是第二次因为界面已经停留在 div1 了,想 div2 继续从 div1 上面下来。。
    xiaohantx
        10
    xiaohantx  
    OP
       2020-12-08 13:38:04 +08:00
    @yaphets666 是。。但是觉得用轮播做太麻烦,有没有稍微简单点的方式
    yaphets666
        11
    yaphets666  
       2020-12-08 13:39:41 +08:00
    @xiaohantx 就用上面那个老哥的代码 vue 这边是可以动态绑定一个 class 让他动就绑上去 不让他动就不绑
    xiaohantx
        12
    xiaohantx  
    OP
       2020-12-08 13:40:00 +08:00
    @learnshare
    @cmdOptionKana
    没有衔接的话就会感觉卡一下
    xiaohantx
        13
    xiaohantx  
    OP
       2020-12-08 13:41:26 +08:00
    @yaphets666 但是第一次是 div1 在 div2 上面下来,上面有内容,第二次要 div2 从 div1 上面下来,第二次之后这个衔接没看明白,第一次是没问题的,,,动画能做出来我知道
    xiaohantx
        14
    xiaohantx  
    OP
       2020-12-08 13:44:57 +08:00
    @yaphets666 就是轮播图那种一直下一页到最后一页时候,继续下一页时候第一页衔接到效果(但是不是通过回弹到第一页)
    zxCoder
        15
    zxCoder  
       2020-12-08 13:48:12 +08:00
    @liyang5945 css 好神奇。。。
    liyang5945
        16
    liyang5945  
       2020-12-08 13:50:25 +08:00
    我懂你的意思了,就是一个无限循环的轮播图呗,使用 swiper 这个 js 插件可以达到你的效果: https://www.swiper.com.cn/demo/index.html
    yaphets666
        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]的图片是一样的 所以说视觉效果上是观察不到这个动作的 这样就无缝循环了
    xiaohantx
        18
    xiaohantx  
    OP
       2020-12-08 13:52:11 +08:00
    @liyang5945 我是知道这个最终解决方案,但是因为不是属于轮播图,其实是消息提示样式,类似轮播图,而且就两个,所以我在想有没有比较简单点到方式,或者通过每次修改 dom 节点来做到。。
    xiaohantx
        19
    xiaohantx  
    OP
       2020-12-08 13:53:58 +08:00
    @yaphets666 那这个方案好像是不太适合,因为始终只有一个新的消息,一个旧的消息,新的消息永远从上出现,旧的消息永远从出现往下,过程没有两条同样内容的消息,所以也就感觉不太适合这个方案
    yaphets666
        20
    yaphets666  
       2020-12-08 13:56:04 +08:00
    @xiaohantx 视觉效果上就是 一个新消息 一个旧消息 1 和 1 你能看出不同吗?当然咱们自己写代码是知道 arr[0]和 arr[4]
    ArthurSS
        21
    ArthurSS  
       2020-12-08 14:00:34 +08:00
    尽量把代码逻辑和视觉逻辑抽开思考吧,就像 17 楼说的一样
    ArthurSS
        22
    ArthurSS  
       2020-12-08 14:03:36 +08:00
    https://cn.vuejs.org/v2/guide/transitions.html
    用 vue 的话,可以看一下自带的 transition 的钩子,单纯操作数据,把视觉效果单独设置
    lllllliu
        23
    lllllliu  
       2020-12-08 14:06:44 +08:00
    html <marquee>
    xiaohantx
        24
    xiaohantx  
    OP
       2020-12-08 14:08:23 +08:00
    @lllllliu marquee 已经废弃了把
    xiaohantx
        25
    xiaohantx  
    OP
       2020-12-08 14:23:06 +08:00
    @liyang5945 修改了下,好像这种思路的话就可以比较简单解决。。https://codepen.io/xiaohantx/pen/abmZYNg?editors=1111
    xiaohantx
        26
    xiaohantx  
    OP
       2020-12-08 14:29:47 +08:00
    @xiaohantx 好像也不对。。。因为新消息只推一次。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1018 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 19:43 · PVG 03:43 · LAX 12:43 · JFK 15:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.