when we collapse transition is not good

Question

When we expand transition is smooth but when we collapse transition is not good... when its about to collapse I see a shake.

I played with transition but its not working. Can you help me providing my code in the fiddle?

.accordion-section {
    border-bottom: solid 1px #000;
}

.accordion-section > h3 {
    padding: 6px;
    font-size: 16px;
    background-color: #CCC;
    margin: 0;
}


.accordion-section > .body {
    height: 0;
    padding: 0 10px;
    overflow-y: hidden;
    transition: height .5s;
    transition: height .5s, padding-top .5s, padding-bottom .5s;
}

It's unclear what you're trying to do, what is "not good" and what "is not working". Note also we expect to see a [mcve] in the question itself, **not only on a third-party site like JSFiddle**. See also https://meta.stackexchange.com/q/168903/194720 — Heretic Monkey, May 01 '17 at 19:45

score 1 · Accepted Answer · answered May 01 '17 at 19:51

1

You can transition max-height instead of height and enclose the body content with padding, etc inside of the element you're transitioning (added .body-inner in .body). I also added a transition for scale() as it will cause a more "accordion" style collapse, but you can try it without that.

with scale() - http://jsfiddle.net/b4L6kyg4/93/

without - http://jsfiddle.net/b4L6kyg4/94/

answered May 01 '17 at 19:51

Michael Coker

52,626
5
64
64

its working, but is it possible to reduce this extra div
– May 01 '17 at 23:07
Not really, the paddings in that element will overflow, causing it to have layout and appear on the page even when `overflow: hidden` is set. So you need to put all the paddings and margins and stuff you want on that element when it's visible inside of the `.body-inner` element, then transition and hide the overflow on the parent (`.body`). I'm sure there's a way to do it if I sat down with you and went through some options, but that's probably the easiest way with your existing code. – Michael Coker May 01 '17 at 23:13
when I click section 1 content opens and if i move till the bottom of the section one content and after that if I click section 1 content closes. but I dont see section 2 after that I see section 3 since the screen moves upwards. how to retain the section 2 in our screen. I used window.scrollTo(0, 0) but still not point to second one any idea??? http://jsfiddle.net/b4L6kyg4/102/ – May 12 '17 at 02:56

score 1 · Answer 2 · answered May 01 '17 at 20:02

1

Just give the initial div background color green. when the accordion is closing it doesn't have any background so it makes it look as if the div is flickering.

.accordion-section > .body {
    background: green;
}

answered May 01 '17 at 20:02

blecaf

1,625
1
8
13

score 0 · Answer 3 · edited May 23 '17 at 12:18

There are a couple of things you can do: First, accelerate some device's hardware by using -webkit-transform: translate3d(0,0,0); . Second, use the CSS animation property transition timing function. I am not sure which effect you are trying to achieve, but you have "ease" on certain elements. Try experimenting with "ease-out". Third, the CSS transitions you're using may not be aligned perfectly with your elements, so when the transition finished running, the div snaps back to its place. A quick patch for this problem may be animation-fill-mode: forwards; . Your fiddle does not have the actual @keyframes for animation, so it is hard to give you any further advice.

when we collapse transition is not good

3 Answers3