css transition problem

[jimfog]

I am trying to implement a transition...I want to bring into view(it is originally hidden)a div(it is a calendar).

While I have managed bringing it into view I cannot hide it again.Take a look at it https://jsfiddle.net/fiddlehunt/m4mdyjnr/

Click the show calendar button to make the calendar appear and click the X icon(on top right)to make it go away...it does not.

The class that tries to hide the calendar is outOfView(line 13...css pane)...the keyframe to accomplish that is directly below it....as I said though it does not work

[jimfog]

nevermind...I solved it...

[jimfog]

there is one problem left though...

when you click the X icon to hide the calendar- at which point the calendar div slides towards the right-the calendar is still there...the user just needs to scroll horizontally to see it.

 

How am I going to preserve the sliding motion and the same time the calendar is "lost" totally-meaning the user cannot see it even by scrolling horizontally.

 

https://jsfiddle.net/fiddlehunt/m4mdyjnr/

Edited November 2, 2015 by jimfog

[COBOLdinosaur]

Several options come to mind all just require an addition property for each of the states of the element. You could use visibility with values of visible and hidden; you could use display with values of block and none; or you could use opacity with values on 1 and 0; or you could even set the width and height to 1px when you want it hidden.

Edited November 2, 2015 by COBOLdinosaur

[jimfog]

I tried display:none but the problem with it is that the transition effect is gone

 

https://jsfiddle.net/fiddlehunt/m4mdyjnr/63/

 

JS pane line 17

[COBOLdinosaur]

That is a timing issue. you have to wait until the transition completes before you modify the container. The scripting needs to set a class after the calandar has been moved off. You might need to test the position and fire the change after the widget is back to its original position. Some CSS properties are not animatable and if they are used during a transition the fire immediately and override the animation.

 

This ia a list of the properties that CSS can animate: http://www.w3schools.com/cssref/css_animatable.asp

Edited November 2, 2015 by COBOLdinosaur

[dsonesuk]

Just place outer container element with overflow: hidden;

 

https://jsfiddle.net/m4mdyjnr/65/

[jimfog]

Just place outer container element with overflow: hidden;

 

https://jsfiddle.net/m4mdyjnr/65/

Yes...this does what I want..thanks.

But it would be good to explain how overflow:hidden helps in that direction.

 

Am I correct to assume that this property dictates what will happen with the content of the container(the calendar in this case)when the content gets past the container?...in this case when that occurs the content will become hidden.

[dsonesuk]

Yep!, as property name and value suggests, overflow: hidden; any overflow is hidden. You should be able to get away with overflow-x: hidden; since the slide occurs from right and this affects only the left and right edges of this targeted element.

[Shipra Kaul]

I was facing a similar issue on my website where I could not really hide elements on the page according to my exact requirements. Thanks a lot for sharing the code here which has saved me a lot of time and money.

http://www.innomediatechnologies.com/