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

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

  •  
  •   zhongpingjing · 58 天前 · 1820 次点击
    这是一个创建于 58 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    感谢各位大佬的回复

    20 条回复    2020-08-10 10:20:38 +08:00
    duan602728596
        1
    duan602728596   58 天前
    这个和 vue 没关系,用 css 动画做
    shintendo
        2
    shintendo   58 天前
    有一说一,真的丑
    wgbx
        3
    wgbx   58 天前
    animate.css 中的 flipInX,有一说一,真的很丑
    wunonglin
        4
    wunonglin   58 天前
    U1S1,丑

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

    你们可能是想模仿这种效果吧…
    VDimos
        11
    VDimos   58 天前 via Android
    rotate3D,这个好丑。。。
    soulmt
        12
    soulmt   58 天前
    什么玩意? 这特效不止丑,而且很土... 配色也很非主流
    mwVYYA6
        13
    mwVYYA6   58 天前 via Android
    再招一个前端呀

    这设计是真的丑,翻面都影响到用户看信息了🙃
    zhongpingjing
        14
    zhongpingjing   58 天前
    @shintendo @wgbx @wunonglin @sjhhjx0122 @musi @96412hj @VDimos @mwVYYA6 hhh,我也觉得好丑,奈何领导审美跟我不一样
    zhongpingjing
        15
    zhongpingjing   58 天前
    @xrr2016 嗯,谢谢 ,都不知道这些动画叫什么名字,列表数量是固定的
    airfling
        16
    airfling   58 天前
    数据展示的界面最好不要动态变化的
    justin2018
        17
    justin2018   58 天前
    感觉不要效果好 看 gif 看了半天都没看到内容是啥 😅
    azcvcza
        18
    azcvcza   58 天前
    研究 CSS 的 transform 效果
    jon
        19
    jon   56 天前
    给我好好展示数据啊!
    burryLove
        20
    burryLove   52 天前
    css 的效果,,css3 有动画效果,,学好 css,很简单
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1958 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 02:37 · PVG 10:37 · LAX 19:37 · JFK 22:37
    ♥ Do have faith in what you're doing.