html 中 div 切换背景图片事件是否有办法绑定过度动画?

2021-02-06 07:39:47 +08:00
 LeeReamond

如题,菜鸡使用 vue 搭建简单前端项目中。

现在有这么个需求,现有一 div 如下

<div style="background-image: url(a.jpg)">
</div>

目前实现了以一个按钮事件触发,更换这个 background-image 的图片地址。但是因为图片一瞬间切换,重复几次以后感觉非常生硬。请问是否有办法以 css 绑定动画,让图片在切换时渐变地替换,比如在 0.5 秒时间内渐变。

或者是以别的什么方式,不是以 url 切换为事件,而是直接切换 div ?请前端大佬解惑,谢谢。

1233 次点击
所在节点    问与答
5 条回复
phy25
2021-02-06 07:48:39 +08:00
Quarter
2021-02-06 09:02:19 +08:00
我看了一下阿里云的动画,他们把所有帧放到一张图里,然后往下一帧一帧切,就形成动画了,直接过渡形成动画不太现实的😅
cpstar
2021-02-06 09:25:00 +08:00
把背景变前景
zuiluo
2021-02-06 10:33:42 +08:00
transition 支持 background-images 属性

transition:background-image 1s linear;
meepo3927
2021-02-07 09:31:55 +08:00

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

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

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

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

© 2021 V2EX