クラスに基づいたリアクションホバーアニメーション

Question

これまでのところ、このコンポーネントとホバリングに関していくつか質問がありました。私の次の最後の質問は、ホバー上のアニメーションに関するものです。

私はホバー上のこの移行をアニメーション化するための最良の方法は何

を.eyeコンテナ&と呼ばれるデフォルトのクラスを持っているし、その後.eye-コンテナ置きます。ここに私のアイテムコンポーネントがあります：

import React from 'react'; 
import { Link } from 'react-router'; 

import Eyecon from '../../static/eye.svg'; 


class Item extends React.Component { 
    constructor(props) { 
     super(props); 
     this.displayName = 'Item'; 
     this.state = { 
      hover: false 
     }; 
    } 
    mouseOver(){ 
     this.setState({hover: true}); 
    } 
    mouseOut() { 
     this.setState({hover: false}); 
    } 
    render() { 
     const { item, i } = this.props; 
     return (
      <div className="grid-box" onMouseOver={this.mouseOver.bind(this)} onMouseOut={this.mouseOut.bind(this)}> 
       <Link to={`/view/${item.id}`}> 
        <div className="eye-container"> 
         <img src={Eyecon}/> 
        </div> 
        <div className="grid-image"> 
         <img src={item.image} alt="" className="fade-in img"></img> 
        </div> 
        <div className="columns"> 
         <div className="column"> 
          <h2>{item.title}</h2> 
         </div> 
         <div className="column"> 
          <h3>Type:</h3> 
          <p>{item.type}</p> 
         </div> 
        </div> 
       </Link> 
      </div> 
     ) 
    } 
} 


export default Item; 

これは私の「知っている反応する」プロジェクトです。誰かが助けることを願っています。あなたが達成しようとしている何

Answer 1

は、純粋なCSSとその:hover疑似クラスを使用してはるかに簡単かつきれいに解決することができます（実行コードスニペットボタンを押す）

.blackbox { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: black; 
 
    z-index: 1; 
 
    position: absolute; 
 
} 
 

 
.blackbox:hover { 
 
    z-index: 3; 
 
    height: 120px; 
 
    width: 120px; 
 
} 
 

 
.redbox { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    z-index: 2; 
 
    position: absolute; 
 
    left: 70px; 
 
    top: 70px; 
 
}

<div class='container'> 
 
    <div class='blackbox'></div> 
 
    <div class='redbox'></div> 
 
<div>

編集：また変更することもできます。右のCSSセレクタを使用して、要素の兄弟は：

.blackbox { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: black; 
 
    z-index: 1; 
 
    position: absolute; 
 
} 
 

 
.blackbox:hover + div { 
 
    z-index: 0; 
 
    height: 120px; 
 
    width: 120px; 
 
} 
 

 
.redbox { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    z-index: 2; 
 
    position: absolute; 
 
    left: 70px; 
 
    top: 70px; 
 
}

<div class='container'> 
 
    <div class='blackbox'></div> 
 
    <div class='redbox'></div> 
 
<div>

Answer 2

私はあなたが何の依存関係の相互作用を持っていない場合は、純粋なCSSを使用することをお勧めします。これは私が意味するところです - あなたはアニメーションの前後にトリガーする同期インタラクションを持っていません - アニメーションは純粋にCSSベースで、JSは必要ありません。

reactを使用すると、要素にホバークラスを追加/削除することができます。これにより、アニメーションをより詳細に制御できます。

.eye {} 
.eyeContainer.lookAround .eye{ ..animate.. } 
.eyeContainer.blink .eyelid {} // you can do a timer to change its state 

と私はあなたのようなクラスを変更するために状態を使用できるように、あなたはクラス名のモジュールを使用することをお勧めし、同じ構成要素にすべてのCSSが含まれているので、あなたは

を管理するための複数のファイルを持っていないでしょう

<eye className={classnames({ 
     blink: this.state.blink, 
     rotate : this.state.rotate 
})} /> 

か、単に純粋なCSSシンプル

.eye { 
    z-index:1; 

} 
.eye:hover + .eyelid.blink{ 
    z-index:10 
    height: 0 
    animate: height 2s 
}