0

Hello this is for a React/Gatsby website i'm working on. I'm searching for a way to animate the child paragraph of a div using only CSS transition:

<div>
   <p>{excerpt}</p>
</div>

Where excerpt is a variable i'm changing via Javascript when the cursor hovers the parent <div>.

This is the simplified React component. excerpt is a React state:

import React, { useState } from 'react'

const PostExcerpt = ({ post, featured }) => {
  const [excerpt, setExcerpt] = useState(post.shortExcerpt)

  const handleHover = (event, hover) => {
    event.preventDefault()
    if (hover) setExcerpt(post.longExcerpt)
    else setExcerpt(post.shortExcerpt)
  }

  return (
    <div
      onPointerOver={(event) => {
        handleHover(event, true)
      }}
      onPointerOut={(event) => {
        handleHover(event, false)
      }}
    >
      <p>{excerpt}</p>
    </div>
  )
}
export default PostExcerpt

The height of the <p> is adjusted automatically when content changes and i would like to animate the height change.

How can I transition height: 0; to height: auto; using CSS? doesn't apply because the height of my element is always set to auto. It simply changes because it follows content dimensions.

lemurweb
  • 45
  • 7
  • Could you put up a Stackoverflow snippet which shows what you have so far, including the JS that updates the paragraph element? Also what property(s) do you want to animate? – A Haworth Feb 17 '21 at 08:55
  • 1
    Does this answer your question? [How can I transition height: 0; to height: auto; using CSS?](https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css) – s.kuznetsov Feb 17 '21 at 08:57
  • I added the whole React code i have so far, where you can see how i change the `excerpt` value when hovering the parent `div` – lemurweb Feb 17 '21 at 09:31

0 Answers0