
案例地址: 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 你的 key={uuid.v4()} 直接 react 渲染新的 DOM 上去 就有 class 改, 自然渡效果了 |