ReactCSSTransitionGroupを使ってアニメーションを作成する方法は？

Question

animate.cssのReactionコンポーネントに「バウンス」アニメーションを実装しようとしています。これまでのところ、私が持っているCSSがある

：

// Animation Bounce 

@-webkit-keyframes bounce { 
    from, 20%, 53%, 80%, to { 
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
    } 

    40%, 43% { 
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    -webkit-transform: translate3d(0, -30px, 0); 
    transform: translate3d(0, -30px, 0); 
    } 

    70% { 
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    -webkit-transform: translate3d(0, -15px, 0); 
    transform: translate3d(0, -15px, 0); 
    } 

    90% { 
    -webkit-transform: translate3d(0,-4px,0); 
    transform: translate3d(0,-4px,0); 
    } 
} 

@keyframes bounce { 
    from, 20%, 53%, 80%, to { 
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
    } 

    40%, 43% { 
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    -webkit-transform: translate3d(0, -30px, 0); 
    transform: translate3d(0, -30px, 0); 
    } 

    70% { 
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
    -webkit-transform: translate3d(0, -15px, 0); 
    transform: translate3d(0, -15px, 0); 
    } 

    90% { 
    -webkit-transform: translate3d(0,-4px,0); 
    transform: translate3d(0,-4px,0); 
    } 
} 

.bounce { 
    -webkit-animation-name: bounce; 
    animation-name: bounce; 
    -webkit-transform-origin: center bottom; 
    transform-origin: center bottom; 
} 


// Classes for ReactCSSTransitionGroup 

.example-enter { 
    opacity: 0.01; 
    color: green; 
} 

.example-enter.example-enter-active { 
    opacity: 1; 
    color: red; 
    animation: bounce 5000ms ease-in; 
} 

.example-leave { 
    opacity: 1; 
    color: purple; 
} 

.example-leave.example-leave-active { 
    opacity: 0.01; 
    color: cyan; 
    animation: bounce 3000ms ease-in; 
} 

そして、私は、コードを反応させるのは、次のとおりです。

<ReactCSSTransitionGroup 
       transitionName="example" 
       transitionEnterTimeout={5000} 
       transitionLeaveTimeout={3000}> 
        <span key={key}> 
         { item } 
        </span> 
    </ReactCSSTransitionGroup> 

これまでのところ、それは実際に動作しない、それはテキストが赤作るんが、それは程度ですそれ。私は "バウンス"の仕事をすることはできません。

ありがとうございました。 ReactCssTransitionGroupはアイテムの挿入/マウントおよび取り外し/アンマウントに取り組んでいます

Answer 1

const CSSTransitionGroup = React.addons.CSSTransitionGroup; 
 

 
class Container extends React.Component { 
 

 
    constructor(props) { 
 
    super(props); 
 
    this.state = { show: false }; 
 
    } 
 

 
    render(){ 
 
    return (
 
     <div className='container'> 
 
     <CSSTransitionGroup 
 
     transitionName="example" 
 
     transitionEnterTimeout={500} transitionLeaveTimeout={500} 
 
     > 
 
     {this.state.show && <div className='box' key={'box'}></div>} 
 
     </CSSTransitionGroup> 
 
     <button onClick={this.handleClick.bind(this)}>Click Me!</button> 
 
     </div> 
 
    ) 
 
    } 
 

 
    handleClick(e){ 
 
    console.log(this.state.show); 
 
    this.setState({ 
 
     show: !this.state.show 
 
    }); 
 
    } 
 
} 
 

 
React.render(<Container />, document.getElementById('container'));

.container { 
 
    text-align: center; 
 
} 
 

 
button { 
 
    position: absolute; 
 
    top: 50px; 
 
    right: 43%; 
 
} 
 

 
.box { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid; 
 
    background-color: green; 
 
} 
 

 
// Animation Bounce 
 
@-webkit-keyframes bounce { 
 
    from, 
 
    20%, 
 
    53%, 
 
    80%, 
 
    to { 
 
     -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
     -webkit-transform: translate3d(0, 0, 0); 
 
     transform: translate3d(0, 0, 0); 
 
    } 
 
    40%, 
 
    43% { 
 
     -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
     -webkit-transform: translate3d(0, -30px, 0); 
 
     transform: translate3d(0, -30px, 0); 
 
    } 
 
    70% { 
 
     -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
     -webkit-transform: translate3d(0, -15px, 0); 
 
     transform: translate3d(0, -15px, 0); 
 
    } 
 
    90% { 
 
     -webkit-transform: translate3d(0, -4px, 0); 
 
     transform: translate3d(0, -4px, 0); 
 
    } 
 
} 
 

 
@keyframes bounce { 
 
    from, 
 
    20%, 
 
    53%, 
 
    80%, 
 
    to { 
 
     -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
     -webkit-transform: translate3d(0, 0, 0); 
 
     transform: translate3d(0, 0, 0); 
 
    } 
 
    40%, 
 
    43% { 
 
     -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
     -webkit-transform: translate3d(0, -30px, 0); 
 
     transform: translate3d(0, -30px, 0); 
 
    } 
 
    70% { 
 
     -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
     -webkit-transform: translate3d(0, -15px, 0); 
 
     transform: translate3d(0, -15px, 0); 
 
    } 
 
    90% { 
 
     -webkit-transform: translate3d(0, -4px, 0); 
 
     transform: translate3d(0, -4px, 0); 
 
    } 
 
} 
 

 
.bounce { 
 
    -webkit-animation-name: bounce; 
 
    animation-name: bounce; 
 
    -webkit-transform-origin: center bottom; 
 
    transform-origin: center bottom; 
 
} 
 

 
// Classes for ReactCSSTransitionGroup 
 
.example-enter { 
 
    opacity: 0; 
 
    background-color: red; 
 
} 
 

 
.example-enter-active { 
 
    background-color: green; 
 
    opacity: 1; 
 
    animation: bounce 500ms ease-in; 
 
    transition: all .5s ease-in; 
 
} 
 

 
.example-leave { 
 
    opacity: 1; 
 
    background-color: purple; 
 
} 
 

 
.example-leave.example-leave-active { 
 
    opacity: 0.1; 
 
    background-color: cyan; 
 
    transition: all .5s ease-out; 
 
    animation: bounce 500ms ease-in; 
 
}

...

ログインhttps://jsfiddle.net/7czwpmdL/