› Closure: The Definitive Guide
案例地址： 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
这个问题放了很久了，想趁着放假解决一下。
 |
1
qhxin Jan 2, 2017
transform 无过渡动画
|
 |
2
cleveryun OP @qhxin 是说 transform 这个属性不支持过渡吗？这个属性是支持过渡的，这个页面点击第二个标签菜单后鼠标放到六面体中某个图片上，那个图片是有个放大的过渡效果的，也是对 transform 属性做的动画^_^
|
 |
3
shpasspass Jan 2, 2017
transform 搭配 transition 才有过度效果
|
|
4
cleveryun OP @shpasspass 我已经加了 transition 的啊 /(ㄒoㄒ)/~~
|
 |
5
ncwgf Jan 2, 2017  1
你的 key={uuid.v4()} 直接讓 react 渲染新的 DOM 上去
就沒有 class 改變這狀態, 自然沒過渡效果了 |
Select Language