V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
cleveryun
V2EX  ›  JavaScript

react 问题, css transition 效果没实现,不知道怎么解决

  •  
  •   cleveryun · 2017-01-02 11:09:20 +08:00 · 4408 次点击
    这是一个创建于 2916 天前的主题,其中的信息可能已经有所发展或是发生改变。

    案例地址: http://www.orzzone.com/react-webpack-boilerplate/

    描述:大图上方一堆小导航图,现在的效果是鼠标移动到小导航图上后小导航图回瞬间变大,期望的效果是这个变大应该是有个过渡效果的。 CSS 部分应该是没问题的。

    相关 js 代码详见下面这个 jsx 文件第 103 行前后(小导航图变大是通过在第 103 行添加 scale 这个 css 类实现的) https://github.com/Yakima-Teng/react-webpack-boilerplate/blob/master/src/views/slider-2d-js.jsx

    相关 CSS 代码详见下面这个样式文件第 77 行: https://github.com/Yakima-Teng/react-webpack-boilerplate/blob/master/src/styles/details/slider-2d-js.less

    这个问题放了很久了,想趁着放假解决一下。

    6 条回复    2017-01-02 12:57:54 +08:00
    qhxin
        1
    qhxin  
       2017-01-02 12:15:55 +08:00
    transform 无过渡动画
    cleveryun
        2
    cleveryun  
    OP
       2017-01-02 12:34:09 +08:00
    @qhxin 是说 transform 这个属性不支持过渡吗?这个属性是支持过渡的,这个页面点击第二个标签菜单后鼠标放到六面体中某个图片上,那个图片是有个放大的过渡效果的,也是对 transform 属性做的动画^_^
    shpasspass
        3
    shpasspass  
       2017-01-02 12:38:49 +08:00
    transform 搭配 transition 才有过度效果
    cleveryun
        4
    cleveryun  
    OP
       2017-01-02 12:41:46 +08:00
    @shpasspass 我已经加了 transition 的啊 /(ㄒoㄒ)/~~
    ncwgf
        5
    ncwgf  
       2017-01-02 12:50:06 +08:00   ❤️ 1
    你的 key={uuid.v4()} 直接讓 react 渲染新的 DOM 上去
    就沒有 class 改變這狀態, 自然沒過渡效果了
    cleveryun
        6
    cleveryun  
    OP
       2017-01-02 12:57:54 +08:00
    @ncwgf 谢谢帮助。确实是这个问题,本地处理了下已经能行得通了。

    结贴。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3685 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 05:06 · PVG 13:06 · LAX 21:06 · JFK 00:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.