标签: react-motion

这个简单的东西应该很容易实现,但是我把头发拉出来是多么复杂.

我想做的就是动画安装和卸载React组件,就是这样.这是我到目前为止所尝试的以及为什么每个解决方案都不起作用:

1. ReactCSSTransitionGroup - 我根本不使用CSS类,它是所有JS样式,所以这不起作用.
2. ReactTransitionGroup - 这个较低级别的API很棒,但它要求你在动画完成时使用回调,所以只使用CSS过渡在这里不起作用.总有动画库,这导致下一点:
3. GreenSock - 许可证对于商业用途IMO来说过于严格.
4. React Motion - 这看起来很棒,但是TransitionMotion对于我需要的东西来说却非常混乱和过于复杂.
5. 当然我可以像Material UI那样做一些技巧,其中元素被渲染但保持隐藏(left: -10000px)但我宁愿不去那条路线.我认为它很hacky,我希望卸载我的组件,以便清理它们并且不会使DOM混乱.

我想要一些易于实现的东西.在mount上,动画一组样式; 在卸载时,为相同(或另一组)样式设置动画.完成.它还必须在多个平台上具有高性能.

我在这里碰到了一堵砖墙.如果我遗漏了一些东西并且有一个简单的方法可以做到这一点,请告诉我.

使用React Motion的TransitionMotion,我想要进出一个或多个框的动画.当一个框进入视图时,它的宽度和高度应该从0像素到200像素,并且它的不透明度应该从0到1.当框离开视图时,反向应该发生(宽度/高度= 0,不透明度= 0 )

我试图解决这个问题http://codepen.io/danijel/pen/Rabo​​xO但我的代码无法正确转换框.盒子的样式立即跳到200像素的宽度/高度而不是过渡.

代码有什么问题？

let Motion = ReactMotion.Motion
let TransitionMotion = ReactMotion.TransitionMotion
let spring = ReactMotion.spring
let presets = ReactMotion.presets

const Demo = React.createClass({
  getInitialState() {
    return {
      items: []
    }
  },
  componentDidMount() {

    let ctr = 0

    setInterval(() => {
      ctr++
      console.log(ctr)
      if (ctr % 2 == 0) {
        this.setState({
          items: [{key: 'b', width: 200, height: 200, opacity: 1}], // fade box in
        });
      } else {
        this.setState({
          items: [], // fade …

我正在用React + React-Router创建网站.我使用react-router-transition为切换视图设置动画,并使用React-motion-ui-pack为小组件设置动画.

问题是,当我在台式机上测试时,动画很好,但在移动浏览器上进行了测试,它会造成很大的滞后.

据我所知,反应路由器转换和react-motion-ui-pack都使用React-Motion.当我使用CSS3 Transforms添加动画时,它不起作用,所以我直接使用CSS属性(比如使用top/left而不是translate transforms).

这是我的代码的一部分:

export default class App extends React.Component {
    render() {
        return (
            <div id="App">
                <TopBar />
                <GlobalNav />

                <RouteTransition
                    pathname={this.props.location.pathname}
                    atEnter={{ opacity: 0.0 }}
                    atLeave={{ opacity: 1.0 }}
                    atActive={{ opacity: 1.0 }}>
                    <div id="views">
                        {this.props.children}
                    </div>
                </RouteTransition>

                <Footer />
            </div>
        );
    }
}

如您所见,我修改了onEnter和onLeave的不透明度.但这会导致移动设备的性能低下.

有没有办法解决这个问题？

我试图用动画从反应运动面包屑x: -20来x: 0.

Folder > SubFolder > Child

问题是,面包屑在第一个渲染时完美地制作动画.随后当props甚至state更改时,动画不会更新.这似乎是一个已知的错误.

我的问题是,如何在状态/道具变化中"重新启动"动画？

const getDefaultStyles = crumbs => {
  const defaultStyles = crumbs.map(() => ({x: -20}))
  console.log(defaultStyles)
  return defaultStyles
}

const getStyles = previousInterpolatedStyles => {
  return previousInterpolatedStyles.map((_, i) => {
    return i === 0 ? {x: spring(0)} : {x: spring(previousInterpolatedStyles[i-1].x)}
  })
}

const Breadcrumb = ({ crumbs }) => (
  <div className='breadcrumb-container'>

      <StaggeredMotion
        defaultStyles={getDefaultStyles(crumbs)}
        styles={getStyles}>
        {
          interpolatedStyles =>
            <div className='breadcrumb-list'>
              {
                interpolatedStyles.map(({x}, …

在React Motion v4中努力让我的头围绕' 旋转 '和' 缩放 '并且似乎无法在网上找到更多如何做到这一点.它很容易改变一个简单的css属性以及如下所示的简单状态更改:

<Motion 
 defaultStyle={{opacity: 0}}
 style={{opacity: spring(this.state.isActive ? 1 : 0, {stiffness: 200, damping: 12})}}>
 {style => 
  <div style={{opacity: style.opacity}} className="action-panel">
   <div id="action-content" className="action-panel-content"></div>
  </div>
 }                            
</Motion>

但是,如何使用更复杂的css属性(例如' transform:rotate(90deg) ')来完成上述操作？

最后,如果我想要更复杂的状态逻辑,例如在翻转和转出时发生的动画,如果各种状态为真或假,哪里最好这样做？在使用React Motion之前,我根据状态和一些条件更新了元素的内联样式,我现在还不确定如何使用React Motion.你的想法会受到欢迎!:d

t xx

我需要像本例中那样移动菜单项下划线。

使用 jQuery，我只需获取菜单项的左侧位置和宽度即可。然后stop.animation悬停执行。

我正在尝试用 制作这样的动画React。但我不知道该怎么做。经过谷歌研究后，我发现了流行的动画反应运动库。但我找不到如何在悬停时触发动画的方法。

我的任务是在悬停时移动蓝色下划线div。请帮助我找到解决方案。