im体育注册送礼金|im体育外围赛事|im体育app今天平台

Cannot retrieve contributors at this time

123 lines (113 sloc) 3.52 KB

	import React , { Component } from "react"
	import PropTypes from "prop-types"
	import ReactDOM from "react-dom"
	import anime from "animejs"
	import animationTimings from "./common/animationTimings"
	import Transition from "react-transition-group/Transition"
	import TransitionGroup from "react-transition-group/TransitionGroup"

	// we will trigger an event on the actual grid node after the exit animation completes
	// to let the transitiongroup know that it can be removed from the DOM

	// this is the only way to let react-transition-group delegate timing
	// to the JavaScript animation (as far as I can tell?) unfortunately
	const ANIMATION_DONE_EVENT = "animation::done"
	const triggerAnimationDoneEvent = node => node . dispatchEvent ( new Event ( ANIMATION_DONE_EVENT ) )

	// cache current animation so that it can be interrupted if necessary
	let currentAnimation = null
	const clearCurrentAnimation = ( ) => currentAnimation && currentAnimation . pause ( )

	const animateGridIn = ( gridContainer , done ) => {
	clearCurrentAnimation ( )
	const cards = gridContainer . querySelectorAll ( ".card" )
	currentAnimation = anime
	. timeline ( )
	. add ( {
	targets : cards ,
	opacity : ,
	duration : 1
	} )
	. add ( {
	targets : gridContainer ,
	translateX : [ - 1000 , ] ,
	opacity : [ , 1 ] ,
	duration : animationTimings . gridEnter
	} )
	. add ( {
	targets : cards ,
	duration : 800 ,
	opacity : [ , 1 ] ,
	translateY : [ - 30 , ] ,
	complete : ( ) => triggerAnimationDoneEvent ( gridContainer ) ,
	delay : ( el , i , l ) => i * 100
	} )
	}

	const animateGridOut = ( gridContainer , done ) => {
	clearCurrentAnimation ( )
	const cards = gridContainer . querySelectorAll ( ".card" )
	gridContainer . style . height = gridContainer . offsetHeight + "px"
	currentAnimation = anime
	. timeline ( )
	. add ( {
	targets : cards ,
	duration : 700 ,
	opacity : [ 1 , ] ,
	translateY : - 30 ,
	delay : ( el , i ) => i * 100
	} )
	. add ( {
	targets : gridContainer ,
	translateX : 1000 ,
	opacity : [ 1 , ] ,
	duration : animationTimings . gridLeave ,
	complete : ( ) => triggerAnimationDoneEvent ( gridContainer ) ,
	offset : "-=300"
	} )
	}

	const animateCardIn = card =>
	anime ( {
	targets : card ,
	opacity : [ , 1 ] ,
	translateY : [ 50 , ] ,
	complete : ( ) => triggerAnimationDoneEvent ( card ) ,
	easing : "easeOutExpo" ,
	duration : animationTimings . cardEnter
	} )

	const animateCardOut = card =>
	anime ( {
	targets : card ,
	translateY : - 10 ,
	opacity : ,
	complete : ( ) => triggerAnimationDoneEvent ( card ) ,
	easing : "easeOutExpo" ,
	duration : animationTimings . cardLeave
	} )

	const animatingOut = false

	const TransitionGrid = props => {
	return (
	< Transition
	unmountOnExit
	appear
	addEndListener = { ( node , done ) => node . addEventListener ( ANIMATION_DONE_EVENT , done ) }
	onEnter = { animateGridIn }
	onExit = { animateGridOut }
	in = { props . visible }
	>
	< ul className = "grid animated-grid" >
	< TransitionGroup component = { null } >
	{ props . items . map ( ( item , index ) => (
	< Transition
	key = { item }
	onEnter = { animateCardIn }
	onExit = { animateCardOut }
	addEndListener = { ( node , done ) => { node . addEventListener ( ANIMATION_DONE_EVENT , done ) } }
	>
	< li className = "card" onClick = { ( ) => props . removeItem ( item ) } >
	< div className = "close-card" > ✕ < / div >
	< div > { item } < / div >
	< / li >
	< / Transition >
	) ) }
	< / TransitionGroup >
	< / ul >
	< / Transition >
	)
	}

	export default TransitionGrid