案例地址: 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 2017-01-02 12:15:55 +08:00
transform 无过渡动画
|
2
cleveryun OP @qhxin 是说 transform 这个属性不支持过渡吗?这个属性是支持过渡的,这个页面点击第二个标签菜单后鼠标放到六面体中某个图片上,那个图片是有个放大的过渡效果的,也是对 transform 属性做的动画^_^
|
3
shpasspass 2017-01-02 12:38:49 +08:00
transform 搭配 transition 才有过度效果
|
4
cleveryun OP @shpasspass 我已经加了 transition 的啊 /(ㄒoㄒ)/~~
|
5
ncwgf 2017-01-02 12:50:06 +08:00 1
你的 key={uuid.v4()} 直接讓 react 渲染新的 DOM 上去
就沒有 class 改變這狀態, 自然沒過渡效果了 |