3

I'm trying to transition an element nicely from being visually hidden and back but it's not working too well.

CodePen: http://codepen.io/gutterboy/pen/VemYrL

The effect I am looking for is something similar to jQuery's slidedown effect... like this: http://codepen.io/gutterboy/pen/adBGar

Edit: This question is NOT about how to transition from a display: none; state, but how to transition from the code below specifically as this is a more user-friendly way to hide content for accessibility purposes.

HTML:

<div class="foo visuallyhidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. An tu me de L. Dat enim intervalla et relaxat. Zenonis est, inquam, hoc Stoici. At certe gravius. Quid, de quo nulla dissensio est? Duo Reges: constructio interrete. Nulla erit controversia.</div>

<div class="button">
    <button id="show">Show Box</button>
</div>

CSS:

.foo {
    margin: 0px auto;
    margin-top: 30px;
    border: 1px solid gray;
    padding: 15px;
    max-width: 500px;
    transition: 0.3s ease-in-out;
}

.button {
    text-align: center;
}

button {
    position: absolute;
    top: 300px;
}

.visuallyhidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    transition: 0.3s ease-in-out;
}

JS:

$('#show').on('click', function(e) {
    $('.foo').toggleClass('visuallyhidden');
});
Brett
  • 19,449
  • 54
  • 157
  • 290
  • Reopened per Meta discussion http://meta.stackoverflow.com/questions/313660/question-incorrectly-closed-as-duplicate-flagging-of-no-help – Paulie_D Dec 30 '15 at 09:07
  • *"how to transition from the code below specifically as this is a more user-friendly way to hide content for accessibility purposes."* Do you want the content to be accessible to keyboard users? Or do you want content to be hidden visibly but screen readers can detect it? – zer00ne Dec 30 '15 at 10:07
  • I guess the screen readers part. I actually got the technique from https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ so I try and make use of it whenever possible. – Brett Dec 30 '15 at 10:25

1 Answers1

0

I'm not sure is this is what you are looking for

EXAMPLE : CODEPEN

I add border-box: content-box; on div as in some transition cases that might cause delays, frozents etc and also add border: 1px solid transparent; so the border animates instead of show/notshow

Community
  • 1
  • 1
Szymon
  • 1,281
  • 1
  • 20
  • 36