Kevin Powell - Community•16mo ago

How did I create this cool effect? | Video and the code is in the comments

I was applying Kevin's height 0 to auto video(https://www.youtube.com/watch?v=B_n4YONte5A) but somewhere in the code I had a couple of other issues, so I changed it a bit and solved my problem but now it's interestingly disappear to the middle 😄 I kinda love it but I don't know where it come from. I belive it has something to do with how I position div to the center (top: 50% left: 50% translateX(-50%) translateY(-50%)) but I don't know why exactly. (Now I see there is not a Tailwind tag in here, I hope I am not breaking any rules.)

Kevin Powell

YouTube

The simple trick to transition from height 0 to auto with CSS

Animating or transitioning to and from height auto is, well, not really possible (though it is being worked on!), but luckily, there is actually a solution using CSS Grid that’s really easy to implement! 🔗 Links ✅ Keith J. Grant’s article on this (also includes a flexbox solution): https://keithjgrant.com/posts/2023/04/transitioning-to-height-...

2 Replies

serkanOP•16mo ago

import React, { useState } from "react";

function QuestionMark() {
  const [visibility, setVisibility] = useState(false);

  // https://www.youtube.com/watch?v=B_n4YONte5A
  const styles = {
    display: "grid",
    gridTemplateRows: visibility ? "1fr" : "0fr",
    padding: visibility ? "1rem" : "0",
  };

  const triggerMessageBox = (e) => {
    setVisibility((prevValue) => {
      return !prevValue;
    });
    e.preventDefault();
  };

  return (
    <div>
      <div
        className="absolute z-[1] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 bg-black rounded-lg transition-all duration-500"
        style={styles}
      >
        <div className="overflow-hidden">
          <button
            onClick={triggerMessageBox}
            className="px-1 text-white block text-2xl font-extrabold ml-auto"
          >
            𝕏
          </button>
          <p className="text-white pt-4">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
            quaerat amet quos odio modi quae est, totam, natus dolor et
            accusamus optio quisquam vel velit ipsa dolorem illo blanditiis
            ducimus. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
            Repellat necessitatibus, magni molestiae maiores nam vel expedita
          </p>
        </div>
      </div>
      <button
        onClick={triggerMessageBox}
        className="absolute right-4 bottom-24 z-50 mt-auto w-10 h-10 border-2 text-white font-extrabold text-3xl flex items-center justify-center"
      >
        ?
      </button>
    </div>
  );
}

export default QuestionMark;

import React, { useState } from "react";

function QuestionMark() {
  const [visibility, setVisibility] = useState(false);

  // https://www.youtube.com/watch?v=B_n4YONte5A
  const styles = {
    display: "grid",
    gridTemplateRows: visibility ? "1fr" : "0fr",
    padding: visibility ? "1rem" : "0",
  };

  const triggerMessageBox = (e) => {
    setVisibility((prevValue) => {
      return !prevValue;
    });
    e.preventDefault();
  };

  return (
    <div>
      <div
        className="absolute z-[1] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 bg-black rounded-lg transition-all duration-500"
        style={styles}
      >
        <div className="overflow-hidden">
          <button
            onClick={triggerMessageBox}
            className="px-1 text-white block text-2xl font-extrabold ml-auto"
          >
            𝕏
          </button>
          <p className="text-white pt-4">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
            quaerat amet quos odio modi quae est, totam, natus dolor et
            accusamus optio quisquam vel velit ipsa dolorem illo blanditiis
            ducimus. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
            Repellat necessitatibus, magni molestiae maiores nam vel expedita
          </p>
        </div>
      </div>
      <button
        onClick={triggerMessageBox}
        className="absolute right-4 bottom-24 z-50 mt-auto w-10 h-10 border-2 text-white font-extrabold text-3xl flex items-center justify-center"
      >
        ?
      </button>
    </div>
  );
}

export default QuestionMark;

serkanOP•16mo ago

Gaming

Programming

How did I create this cool effect? | Video and the code is in the comments