react 动画animation
夔宏深
1 create-react-app name
yarn add react-transition-groupjs
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Transition } from "react-transition-group";
import "./tr.css";
class Tr extends Component {
constructor(props) {
super(props);
this.state = {
inCtrl: false
};
}
render() {
//in =>true
//exited -> entering
// timeout 的时间后 entered
//in =>false
//entered -> exting
//timeout的时间后 extinged
let { inCtrl } = this.state;
return (
<div>
<button
onClick={() => {
this.setState({
inCtrl: !this.state.inCtrl
});
}}
>
点我
</button>
<Transition
mountOnEnter
timeout={{ enter: 1000, exit: 3000 }}
in={inCtrl}
appear
unmountOnExit
onEnter={()=>{
console.log("before enter")
}}
onEntering={()=>{
console.log("entering")
}}
onEntered={()=>{
console.log("onentered")
}}
onExiting={()=>{
console.log("onExiting")
}}
onExited={()=>{
console.log("onExited")
}}
>
{status => {
console.log(inCtrl, status);
return (
<div className={`fade-init fade-${status}`}>7877887888000</div>
);
}}
</Transition>
</div>
);
}
}
ReactDOM.render(<Tr />, document.getElementById("root"));
css
.fade-init {
padding: 20px;
width: 100px;
height: 50px;
background-color: #d2edf1;
border: 1px solid #438ceb;
opacity: 0;
transition: all 800ms;
}
.fade-entering {
opacity: 1;
background: rgba(240, 200, 114,.3);
}
.fade-entered {
opacity: 1;
background-color:rgba(240, 200, 114, 1);
}
.fade-exiting {
opacity: 1;
background-color:rgba(240, 200, 114,.9);
}
.fade-exited {
opacity: 1;
background: rgba(240, 200, 114,.1);
}
dayNigth.js
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Transition,} from 'react-transition-group';
import './dayNight.css'
class DayNight extends Component{
state = { night: false}
switchClick = ()=>{
this.setState({night: !this.state.night})
}
render(){
let {night} = this.state;
return (
<Transition
enter={false}
timeout={0}
in={night}
>
{status => {
// console.log(status);
return (
<div className={`fullpage night-${status}`}>
{/* {status} */}
<div className="section">
<div className="time-circle">
<div className="sun"></div>
<div className="moon">
<div></div>
<div></div>
<div></div>
</div>
<div className="stars">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div className="water"></div>
</div>
<div
id={`switch`}
className={`switch-${status}`}
onClick={this.switchClick}
>
<div id="circle"></div>
</div>
</div>
</div>
)}}
</Transition>
)
}
}
ReactDOM.render(<DayNight />, document.getElementById('root'))
dayNight.css
body, html {
padding: 0;
margin: 0;
height: 100%;
text-align: center;
}
#root{height: 100%;}
.fullpage{height: 100%;}
.section {
padding-top: 40px;
font-size: 1em;
text-align: center;
background: #f1ede3;
width: 100%;
height: 100%;
color: #555;
transition: background 0.5s ease-in-out;
}
.night-entered .section {
background: #080d17;
color: #e9e5d5;
}
.night-entered #intro-text {
color: #e9e5d5;
}
.time-circle {
position: relative;
background: linear-gradient(to bottom, #BE4405, #F6C60C);
width: 400px;
height: 400px;
border-radius: 50%;
border: 4.5px solid #555;
overflow: hidden;
padding: 0px;
margin: 0 auto;
margin-bottom: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
text-align: center;
-webkit-transition: all 1.1s ease-in-out;
transition: all 1.1s ease-in-out;
}
.night-entered .time-circle{
background: linear-gradient(to bottom, #111936, #285A7B);
border-color: #e9e5d5;
}
.sun {
margin-top: 20px;
background: #F2EF88;
box-shadow: 0 0 20px rgba(242, 239, 136, 0.4);
width: 30%;
height: 30%;
border-radius: 50%;
position: relative;
left: 35%;
top: 48%;
-webkit-animation: pulse 5s ease infinite alternate;
animation: pulse 5s ease infinite alternate;
-webkit-transition: all 1.1s 0.4s ease;
transition: all 1.1s 0.4s ease;
}
@keyframes pulse {
0% {box-shadow: 0 0 20px rgba(242, 239, 136, 0.4);}
50% {box-shadow: 0 0 40px rgba(242, 239, 136, 1);}
100% {box-shadow: 0 0 20px rgba(242, 239, 136, 0.4);}
}
@-webkit-keyframes pulse {
0% {box-shadow: 0 0 20px rgba(242, 239, 136, 0.4);}
50% {box-shadow: 0 0 40px rgba(242, 239, 136, 1);}
100% {box-shadow: 0 0 20px rgba(242, 239, 136, 0.4);}
}
.night-entered .sun {
top: 70%;
left: 80%;
-webkit-transition: all 1.1s 0s ease;
transition: all 1.1s 0s ease;
}
.moon {
position: absolute;
margin-top: 20px;
background: #d9d8d0;
box-shadow: inset -10px 2px 0 0px #899098;
width: 22.5%;
height: 22.5%;
border-radius: 100%;
position: relative;
left: 120%;
margin-left: -50px;
top: -50%;
overflow: hidden;
-webkit-transition: all 1.1s 0s ease;
transition: all 1.1s 0s ease;
}
.night-entered .moon {
left: 65%;
top: -10%;
-webkit-transition: all 1.1s 0.4s ease;
transition: all 1.1s 0.4s ease;
}
.moon div:nth-child(n) {
position: relative;
background: #b9b8b0;
border-radius: 50%;
box-shadow: inset 4px -2px 0 0px #535457;
}
.moon div:nth-child(1) {
top: 25%;
left: 12%;
width: 27%;
height: 27%;
}
.moon div:nth-child(2) {
top: -11%;
left: 60%;
width: 16%;
height: 16%;
}
.moon div:nth-child(3) {
top: 25%;
left: 44%;
width: 16%;
height: 16%;
}
.stars {
opacity: 0;
margin-left: 100px;
top: 0;
left: 0;
-webkit-transition: all 0.8s 0s ease;
transition: all 0.8s 0s ease;
z-index: 1000;
}
.night-entered .stars {
opacity: 1;
-webkit-transition: all 3s 0.4s ease;
transition: all 3s 0.4s ease;
}
.stars div:nth-child(n) {
position: absolute;
background: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
border-radius: 50%;
box-shadow: 0 0 10px rgba(255, 255, 255, 1);
overflow: hidden;
width: 0.4%;
height: 0.4%;
margin-left: 20%;
margin-top: -20%;
-webkit-transition: all 1s 0s ease;
transition: all 1s 0s ease;
}
.night-entered .stars div:nth-child(n) {
margin-left: 0;
margin-top: 0;
-webkit-transition: all 1s 0.4s ease-out;
transition: all 1s 0.4s ease-out;
}
.stars div:nth-child(1) {
left: 25%;
top: 30%;
}
.stars div:nth-child(2) {
left: 55%;
top: 20%;
}
.stars div:nth-child(3) {
left: 60%;
top: 60%;
}
.stars div:nth-child(4) {
left: 40%;
top: 45%;
}
.stars div:nth-child(5) {
left: 15%;
top: 55%;
}
.stars div:nth-child(6) {
left: 40%;
top: 10%;
}
.stars div:nth-child(7) {
left: 80%;
top: 55%;
}
.water {
position: absolute;
background: repeating-radial-gradient(ellipse farthest-corner at center -400%, #f5c30e 30%, #518eac 90%) repeat scroll 0 0 #518eac;
width: 100%;
height: 200px;
top: 68%;
-webkit-transition: all 1.1s ease;
transition: all 1.1s ease;
}
.night-entered .water{
background: repeating-radial-gradient(ellipse farthest-corner at center -400%, #7fa1bb 30%, #1d425a 90%) repeat scroll 0 0 #1d425a;
}
#switch,
#circle {
height: 30px;
-webkit-transition: all 0.4s cubic-bezier(0.54, 1.6, 0.5, 1);
transition: all 0.4s cubic-bezier(0.54, 1.6, 0.5, 1);
}
#switch {
width: 60px;
margin: 0 auto;
border: 2px solid #DA8508;
border-radius: 27px;
background: #DA8508;
position: relative;
}
#circle {
margin-top: 5%;
margin-left: 5%;
width: 40%;
height: 80%;
border-radius: 50%;
box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
background: #e9e5d5;
}
.switch-entered {
border-color: #1C3958 !important;
background: #1C3958 !important;
}
.switch-entered #circle {
margin-left: 55%;
background: #e9e5d5;
}
类似资料：