html - 有没有办法让一个动画或者当它的高度由于 html 值的变化而变化时？

Question

您好，这是针对我正在开发的 React/Gatsby 网站。我正在寻找一种仅使用 CSS 转换为 div 的子段落设置动画的方法：

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

excerpt当光标悬停在父级时，我通过 Javascript 更改的变量在哪里<div>。

这是简化的 React 组件。excerpt是一个反应状态：

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

内容更改时会自动调整高度，<p>我想为高度变化设置动画。

我怎样才能过渡高度：0；到高度：自动；使用 CSS？不适用，因为我的元素的高度始终设置为auto. 它只是改变，因为它遵循内容维度。

标签： htmlcssreactjs