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

2020-08-03 16:45:04 +08:00
 zhongpingjing

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

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

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

感谢各位大佬的回复

3879 次点击
所在节点    Vue.js
20 条回复
duan602728596
2020-08-03 17:03:14 +08:00
这个和 vue 没关系,用 css 动画做
shintendo
2020-08-03 17:05:12 +08:00
有一说一,真的丑
wgbx
2020-08-03 17:09:28 +08:00
animate.css 中的 flipInX,有一说一,真的很丑
wunonglin
2020-08-03 17:11:55 +08:00
U1S1,丑

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

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

这设计是真的丑,翻面都影响到用户看信息了🙃
zhongpingjing
2020-08-03 19:16:40 +08:00
@shintendo @wgbx @wunonglin @sjhhjx0122 @musi @96412hj @VDimos @mwVYYA6 hhh,我也觉得好丑,奈何领导审美跟我不一样
zhongpingjing
2020-08-03 19:17:51 +08:00
@xrr2016 嗯,谢谢 ,都不知道这些动画叫什么名字,列表数量是固定的
airfling
2020-08-03 19:52:22 +08:00
数据展示的界面最好不要动态变化的
justin2018
2020-08-03 20:23:29 +08:00
感觉不要效果好 看 gif 看了半天都没看到内容是啥 😅
azcvcza
2020-08-04 09:04:54 +08:00
研究 CSS 的 transform 效果
jon
2020-08-05 14:05:53 +08:00
给我好好展示数据啊!
burryLove
2020-08-10 10:20:38 +08:00
css 的效果,,css3 有动画效果,,学好 css,很简单

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/695292

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX