V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
LeeReamond
V2EX  ›  程序员

如何通过 js 的方式控制 css 播放动画?

  •  
  •   LeeReamond · 2022-07-31 03:09:37 +08:00 · 404 次点击
    这是一个创建于 838 天前的主题,其中的信息可能已经有所发展或是发生改变。

    想要实现的效果:侧边栏收纳起来的时候显示小图标,展开的时候显示大图标,两者大小不同,通过动画平滑过度。

    纯 css 的方式实现比较简单,比如类似以下实现,可以做到鼠标放上去的时候平滑动画过度

    .cls {
      height: 40px;
      transition: .5s linear;
    }
    .cls: hover {
      height: 80px
    }
    

    目前的问题在于组件比较复杂,侧边栏的展开与否不是通过悬停实现的,而是通过 js 控制唤醒的。我使用的是 vue3 框架,在这种情况下如果要实现侧边栏展开前后 cls 高度变化,一般是写作两个类,比如

    <div :class="{'cls': !expanded, 'cls-hover': expanded}" />
    

    这样就可以把组件的高度绑定到 js 变量 expanded 上。但是发现一个问题是这么搞的话因为它属于两个类,所以没法利用 transition 的动画变化了,过渡非常生硬。有啥解决方案吗?

    wdssmq
        1
    wdssmq  
       2022-07-31 11:45:49 +08:00
    可以追加一个类,而不是切换,.cls.hover {}
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1057 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 22:38 · PVG 06:38 · LAX 14:38 · JFK 17:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.