react如何实现淡入淡出

Image.js

importReact,{Component}from'react'
importCSSTransitionGroupfrom'react-addons-css-transition-group';
import'./pic.css'

classImageextendsComponent{

constructor(props){
super(props)
}

render(){
return(

)
}

}

Dot.js

importReact,{Component}from'react'

classDotextendsComponent{
constructor(props){
super(props)
this.state={arr:[1,2,3]}
}
render(){
return(


{this.state.arr.map((item,index)=>{
return(
)
})}

)
}
}

exportdefaultDot

//css样式
*{margin:0;padding:0;}
.list{width:500px;
height:400px;
margin:30pxauto;
}
ul{position:relative;
width:500px;
height:400px;
overflow:hidden;
}
li{
position:absolute;
list-style:none;}
img{width:500px;
height:400px;
}
.item-enter{
position:absolute;
opacity:0;

}
.item-enter-active{opacity:1;
transition:1.5sopacityease-in-out;
}
.item-leave{position:absolute;
opacity:1;}
.item-leave-active{
opacity:0;
transition:1.5sopacityease-in-out;
}

.dot{
position:absolute;
top:380px;
left:250px;

width:150px;
height:50px;
}
.dotul{width:100%;
height:100%;
}
.dotli{
position:static;
float:left;
margin-left:10px;
width:25px;
height:25px;
border-radius:50%;
border:1pxsoliddeeppink;
transition:3s;
list-style:none;}

.current{background-color:gold;}