V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zhongpingjing
V2EX  ›  Vue.js

请教一下各位大佬,这样的动画效果,用 vue 应该怎么实现

  •  
  •   zhongpingjing · 2020-08-03 16:45:04 +08:00 · 3879 次点击
    这是一个创建于 1575 天前的主题,其中的信息可能已经有所发展或是发生改变。

    公司的前端走了,要我一个后端来实现这几个动画。

    具体的数据都是一个列表,列表展示的时候分为几段,要求列表每一项都进行翻转,翻转完后展示下一段

    效果如图。 不知道有没有现存的库可以调用?

    感谢各位大佬的回复

    20 条回复    2020-08-10 10:20:38 +08:00
    duan602728596
        1
    duan602728596  
       2020-08-03 17:03:14 +08:00
    这个和 vue 没关系,用 css 动画做
    shintendo
        2
    shintendo  
       2020-08-03 17:05:12 +08:00
    有一说一,真的丑
    wgbx
        3
    wgbx  
       2020-08-03 17:09:28 +08:00
    animate.css 中的 flipInX,有一说一,真的很丑
    wunonglin
        4
    wunonglin  
       2020-08-03 17:11:55 +08:00
    U1S1,丑

    这个是 css 做的,无非就是定义个 sytle,用 transform: rotateX(90deg)翻转就行了。具体翻转和更改数据的时机你自己决定就行了
    xrr2016
        5
    xrr2016  
       2020-08-03 17:15:59 +08:00
    这种叫交织动画 , 如果列表项数量固定就还好,看看 anime.js
    sjhhjx0122
        6
    sjhhjx0122  
       2020-08-03 17:22:50 +08:00
    这个跟 vue 没啥关系,顶多用一下 transition-group 标签,可以用 animate.css https://animate.style/找一下是那个效果,
    u1s1 真的丑
    musi
        7
    musi  
       2020-08-03 17:26:03 +08:00 via iPhone
    css 做动画,js 控制数据和动画显示,不过是真的丑
    dinjufen
        8
    dinjufen  
       2020-08-03 18:26:20 +08:00
    丑+10086
    96412hj
        9
    96412hj  
       2020-08-03 18:30:41 +08:00
    这设计咋想的,想让用户看啥呢,一直闪,用户体验太差了,抓不到重点
    ETiV
        10
    ETiV  
       2020-08-03 18:45:24 +08:00
    https://www.codeseek.co/preview/vOxdMj

    你们可能是想模仿这种效果吧…
    VDimos
        11
    VDimos  
       2020-08-03 18:51:34 +08:00 via Android
    rotate3D,这个好丑。。。
    soulmt
        12
    soulmt  
       2020-08-03 18:55:07 +08:00
    什么玩意? 这特效不止丑,而且很土... 配色也很非主流
    mwVYYA6
        13
    mwVYYA6  
       2020-08-03 19:05:10 +08:00 via Android
    再招一个前端呀

    这设计是真的丑,翻面都影响到用户看信息了🙃
    zhongpingjing
        14
    zhongpingjing  
    OP
       2020-08-03 19:16:40 +08:00
    @shintendo @wgbx @wunonglin @sjhhjx0122 @musi @96412hj @VDimos @mwVYYA6 hhh,我也觉得好丑,奈何领导审美跟我不一样
    zhongpingjing
        15
    zhongpingjing  
    OP
       2020-08-03 19:17:51 +08:00
    @xrr2016 嗯,谢谢 ,都不知道这些动画叫什么名字,列表数量是固定的
    airfling
        16
    airfling  
       2020-08-03 19:52:22 +08:00
    数据展示的界面最好不要动态变化的
    justin2018
        17
    justin2018  
       2020-08-03 20:23:29 +08:00
    感觉不要效果好 看 gif 看了半天都没看到内容是啥 😅
    azcvcza
        18
    azcvcza  
       2020-08-04 09:04:54 +08:00
    研究 CSS 的 transform 效果
    jon
        19
    jon  
       2020-08-05 14:05:53 +08:00
    给我好好展示数据啊!
    burryLove
        20
    burryLove  
       2020-08-10 10:20:38 +08:00
    css 的效果,,css3 有动画效果,,学好 css,很简单
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1078 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 19:46 · PVG 03:46 · LAX 11:46 · JFK 14:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.