来自jQuery，如何在React.js中做DOM动画？如动画进度条？

我几个月来一直在使用React，并且我使用了大量的jQuery来处理DOM动画/操作。我可以很好地处理操纵，但动画化事情和做闪亮的UI东西似乎棘手的反应。或者至少不像jQuery那么简单。我不想拉动jQuery的动画。来自jQuery，如何在React.js中做DOM动画？如动画进度条？

一些例子我想实现：

用户向下滚动到我的技能我的个人投资组合页面的部分，在那里有一些引导进度条。一旦用户滚动到他们，我将如何动画这些栏以“填满”。我想象一下检测位置？我也可以建立自己的进度条，以便有更多的控制权。
当用户调整我的投资组合部分的flexbox设置和代表我的项目的图像时，我希望图像缓慢地重新定位自己，就像一个转换，而不是捕捉到他们的新位置。
或者简单的东西就像有东西从左/右滑入？

我认为jQuery宠坏了我！我只是觉得我没有像React那样控制太多。我曾看过渡组，但看起来相当有限。

这里是我的进度条代码有问题...

import React from 'react'; 

export default (props) => { 
const width = `${props.lvl}%` 

// setup diff colors for bars 
let backgroundColor = (function(lvl){ 
    if (lvl <=35) { 
     return '#ffa64d' 
    } 
    else if (lvl >= 36 && lvl <= 49) { 
     return '#ffff66' 
    } 
    else { 
     return '#47d147' 
    } 
}(props.lvl)) 

return (
    <div> 
     <h4 style={{display: 'inline'}}>{props.name}</h4> 
     <div className="progress"> 
      <div className='progress-bar' role="progressbar" aria-valuenow="70" 
      aria-valuemin="0" aria-valuemax="100" style={{width, backgroundColor}}> 
      </div> 
     </div> 
    </div> 
) 
}

来源

2016-05-02 MindfulBell

您可以使用[reactjs内嵌样式]（https://facebook.github.io/react/tips/inline-styles.html）来动态计算进度条宽度。为什么不能使用css转换为您的动画？ – Rison

你可以用新的百分比重新渲染组件... – falsarella

Rison，当然我想要使用CSS，但是因为我必须检测滚动位置（即当进度条部分在屏幕上时只动画宽度），我无法弄清楚如何用CSS来做到这一点。我认为这需要一些JS的权利？有只用CSS的方法吗？ – MindfulBell

我想大多数人都得到他们的动画通过CSS转换完成的;这是迄今为止最简单的方法。不过，我已经编写了一个自定义模块，该模块提供了通过操作作为组件状态一部分存储的内联样式来动画元素的功能。你可以找到它here。你必须自己判断这个麻烦是否值得这个功能。

来源

2016-05-03 10:16:12

来自jQuery，如何在React.js中做DOM动画？如动画进度条？

回答

相关问题