CSS Animate button to appear

Question

In the React app I'm building, I would like a button to be hidden until certain conditions are met. Then I'd to animate it in from underneath another element. At the moment I am always rendering the button and adding a class of "hidden" when I'd like it hidden. The SASS looking something like this:

button {
  display: inline-block;
  width: 100%;
  height: 63px;
  transition: height 250ms ease-in-out;
  font-size: 24px;

  &.hidden {
    height: 0;
  }
}

But when the button hides, the element gets smaller, but the text is still visible. Similar to this: https://jsfiddle.net/dtu56e1j/

What am I doing wrong? Or is there a better way to get a button to animate in?

Couple caveats here; `height` won't animate on IE, and it only pertains to the parent box the text sits in and not the font inside. You might consider instead [transform: scale()](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale) but be leary of overuse of `transform`. — Chris W., Apr 30 '19 at 18:24
I had a go with `scaleY()`, but that didn't give me the desired effect either. Thanks for the IE warning. — Votemike, Apr 30 '19 at 18:26
Similar to https://davidwalsh.name/demo/css-slide.php , except the pink area would be a button. And the white area wouldn't remain, that would also disappear. — Votemike, Apr 30 '19 at 18:28
I want to hide the "Button to Hide" https://jsfiddle.net/dtu56e1j/ — Votemike, Apr 30 '19 at 19:36
On your fiddle example just change `height: 0` to `display: none` if you want it removed; or use the `visibility` property to toggle visible/hidden in the same manner if you just want it to "hide" — Chris W., Apr 30 '19 at 20:17

Vlad274 · Accepted Answer · 2019-05-01T14:28:55.560

2

IMO the other answers provide working, but complicated solutions to your problem. Simply put, you're missing a single CSS property - overflow: hidden.

I created this StackBlitz to illustrate the point.

However, the only modification necessary to the original code is this:

button {
  overflow: hidden;
  [...]
}

Fiddle to better match use-case: https://jsfiddle.net/smn6xgv2/

Because the button element has some internal padding, setting height: 0 doesn't completely remove the element from the display. To address that issue, we wrap the button inside a div and then animate the height of the div.

Additionally, the div should be left with the default display: block. In the original example, the display: inline-block causes the browser to reserve a minimum height of line-height. More info in this SO question

edited May 01 '19 at 14:28

answered Apr 30 '19 at 18:59

Vlad274

6,514
2
32
44

^ yaaaa, this guy understood what was being asked better than I haha. +1 – Chris W. Apr 30 '19 at 19:03
I think the effect I'm trying to achieve is this: https://js-mksshk.stackblitz.io . Which you can see doesn't work in the same way. – Votemike Apr 30 '19 at 19:29
@Votemike how much control do you have over the HTML? IE could you wrap the button inside a div? – Vlad274 Apr 30 '19 at 19:48
I could do that. I think I tried, but it still didn't work. – Votemike Apr 30 '19 at 20:46
1

@Votemike It seems to work "ok" https://jsfiddle.net/4zs9wjo6/1/. It looks to still reserve space because it is `display: inline-block`. Is that necessary for your situation? – Vlad274 Apr 30 '19 at 20:56
No, I don't think `display: inline-block` is needed in my example – Votemike Apr 30 '19 at 21:30
So was it just the width that was missing? – Votemike May 01 '19 at 08:25

score 0 · Answer 2 · answered Apr 30 '19 at 18:46

0

With a little work you could use translateY to get this done nicely

const el = document.querySelector("#testButton");

setInterval(() => {
  el.classList.toggle("hidden");
}, 2000);

button {
  display: inline-block;
  background-color: darkblue;
  color: white;
  width: 100%;
  height: 63px;
  transition: transform 250ms ease-in-out;
  font-size: 24px;
}

button.hidden {
  transform: translateY(63px); /* or -63px to invert */
}

/* Make a wrapper class so that your button disappears on transform */
.wrapper {
  height: 63px;
  overflow: hidden;
}

<div class="wrapper">
  <button id="testButton">My Button!</button>
</div>

answered Apr 30 '19 at 18:46

Robbie Milejczak

5,664
3
32
65

Sneaky. I'll see if I can get this to work if I can't find an actual hiding solution. – Votemike Apr 30 '19 at 19:31
I think this will be the most performant way you can achieve this effect with just CSS alone, though you could also look into using something like `react-transition-group` and conditional rendering https://github.com/reactjs/react-transition-group/tree/v1-stable best of luck I hope you find something that suits your needs – Robbie Milejczak Apr 30 '19 at 19:34
I was looking at `react-transition-group` but it seems a lot to do for a simple animation – Votemike Apr 30 '19 at 19:37

CSS Animate button to appear

2 Answers2