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

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

  •  
  •   LeeReamond · 2021-02-06 07:39:47 +08:00 · 1233 次点击
    这是一个创建于 1371 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

    5 条回复    2021-02-07 09:31:55 +08:00
    phy25
        1
    phy25  
       2021-02-06 07:48:39 +08:00 via Android
    Quarter
        2
    Quarter  
       2021-02-06 09:02:19 +08:00 via iPhone
    我看了一下阿里云的动画,他们把所有帧放到一张图里,然后往下一帧一帧切,就形成动画了,直接过渡形成动画不太现实的😅
    cpstar
        3
    cpstar  
       2021-02-06 09:25:00 +08:00
    把背景变前景
    zuiluo
        4
    zuiluo  
       2021-02-06 10:33:42 +08:00   ❤️ 1
    transition 支持 background-images 属性

    transition:background-image 1s linear;
    meepo3927
        5
    meepo3927  
       2021-02-07 09:31:55 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1096 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 19:02 · PVG 03:02 · LAX 11:02 · JFK 14:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.