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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› D3.js

推荐书目

› JavaScript 权威指南第 5 版

这是一个创建于 2880 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

6 条回复 • 2017-01-02 12:57:54 +08:00

qhxin

2017-01-02 12:15:55 +08:00

transform 无过渡动画

cleveryun

2017-01-02 12:34:09 +08:00

@qhxin 是说 transform 这个属性不支持过渡吗？这个属性是支持过渡的，这个页面点击第二个标签菜单后鼠标放到六面体中某个图片上，那个图片是有个放大的过渡效果的，也是对 transform 属性做的动画^_^

shpasspass

2017-01-02 12:38:49 +08:00

transform 搭配 transition 才有过度效果

cleveryun

2017-01-02 12:41:46 +08:00

@shpasspass 我已经加了 transition 的啊 /(ㄒoㄒ)/~~

ncwgf

2017-01-02 12:50:06 +08:00

你的 key={uuid.v4()} 直接讓 react 渲染新的 DOM 上去
就沒有 class 改變這狀態, 自然沒過渡效果了

cleveryun

2017-01-02 12:57:54 +08:00

@ncwgf 谢谢帮助。确实是这个问题，本地处理了下已经能行得通了。

结贴。