div 元素從下到上打開，具有滑動效果而不是從上到下

Question

我有這個組件，其中有一個按鈕和一個包含輸入元素的 div。 單擊按鈕時，div 應該向下滑動打開容器並顯示輸入字段，如果再次單擊它，它將關閉向上滑動。

現在，當單擊按鈕時，它以相反的方式工作。 即打開向上滑動，關閉向下滑動。

我正在使用max-height和will-change css 屬性來使其工作。 我該如何解決？

這是CodeSandbox 。

這是組件：

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [ isOpen, setIsOpen ] = useState( false );

  const handleOpen = () => {
    setIsOpen( !isOpen );
  };

  return (
    <div className="App">

      <button onClick={handleOpen}>Open</button>

      <div className={`container ${isOpen ? "containerOpened" : "containerClosed"}`}>
        <input type="text" />
      </div>

    </div>
  );
}

這是 CSS：

.App {
  font-family: sans-serif;
  text-align: center;
  position: relative;
}

.container {
  position: absolute;
  bottom: -46px;
  right: 0;
  margin-right: 30px;
  padding: 10px 20px;
  background: #fff;
  border: 1px solid #e2e2e2;
  transition: all 0.3s ease-in-out;
}

.containerClosed {
  overflow: hidden;
  max-height: 0;
  transition: all 0.3s ease;
  will-change: transform;
}

.containerOpened {
  max-height: 100px;
  overflow: hidden;
  transition: all 0.3s ease;
  will-change: transform;
}

.container input {
  border: none;
  outline: none;
  border-bottom: 1px solid #e2e2e2;
  width: 200px;
}

請注意，我需要對容器使用絕對定位和邊距填充。

Answer 1

嘗試這個：

.App {
  font-family: sans-serif;
  text-align: center;
  position: relative;
}

.container {
  position: absolute;
  top: 46px;
  right: 0;
  margin-right: 30px;
  padding: 0;
  background: #fff;
  border: 1px solid #e2e2e2;
  transition: all 0.3s ease-in-out;
}

.containerClosed {
  overflow: hidden;
  height: 0;

  
}

.containerOpened {
  max-height: 100px;
  overflow: hidden;
  height: 100px
  
}

.container input {
  border: none;
  outline: none;
  border: 1px solid #e2e2e2;
  width: 200px;
}