export const enterAnimation = ({release}) => {
  const ttl = document.querySelector('.example02__ttl')
  const character = document.querySelector('.example02__character')
  const imgEle = character.querySelector('img')
  const content = document.querySelector('.example02__content')

  const func = () => {
    imgEle.removeEventListener('animationend', func)
    release() // This will be called when the animation ends
  }
  imgEle.addEventListener('animationend', func)

  character.classList.add('is-entering') // Fire CSS animation by adding class
  ttl.classList.add('is-visible')
  content.classList.add('is-visible')
}

export const leaveAnimation = ({release}) => {
  const ttl = document.querySelector('.example02__ttl')
  const character = document.querySelector('.example02__character')
  const content = document.querySelector('.example02__content')

  const func = () => {
    character.removeEventListener('animationend', func)
    release() // This will be called when the animation ends
  }
  character.addEventListener('animationend', func)

  character.classList.add('is-leaving') // Fire CSS animation by adding class
  ttl.classList.remove('is-visible')
  content.classList.remove('is-visible')
}

import React from 'react'
import {enterAnimation, leaveAnimation} from './animation_example01'
import {useTransition} from 'react-queue-router'

const Example02 = () => {
  useTransition(enterAnimation, leaveAnimation)
  
  return (
    <div className='example02'>
      <h1 className='example02__ttl'>Example02</h1>
      <div className='example02__character'>
        <img src='/img/logo.svg' alt=''/>
      </div>
      <div className='example02__codes'>
        {/* content */}
      </div>
    </div>
  )
}

export default Example02