Jump to content

css transition problem


jimfog
 Share

Recommended Posts

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

Link to comment
Share on other sites

nevermind...I solved it...

Link to comment
Share on other sites

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 by jimfog
Link to comment
Share on other sites

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 by COBOLdinosaur
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by COBOLdinosaur
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...