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

2017-01-02 11:09:20 +08:00
 cleveryun

案例地址: 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

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

4406 次点击
所在节点    JavaScript
6 条回复
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 谢谢帮助。确实是这个问题,本地处理了下已经能行得通了。

结贴。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/331684

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX