Problem with transition

HTML & CSS
1

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

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

2

I found the solution to it…thanks anyway.

3

Glad you sorted it I was about to have a look :smile:

You seem to have made it a little more complicated than it should be as there is no need for multiple classes or keyframes.

Here’s a basic demo.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
	overflow:hidden;
	width:50%;
	margin:auto;
	background:#f9f9f9;
}
#calendar {
	background:red;
	margin:20px 0;
	border:1px solid #000;
	-webit-transition:transform 1s ease;
	-moz-transition:transform 1s ease;
	transition:transform 1s ease;
}
.calendar {
	-webkit-transform:translateX(0);
	-moz-transform:translateX(0);
	transform:translateX(0);
}
.hide {
	-webkit-transform:translateX(100%);
	-moz-transform:translateX(100%);
	transform:translateX(100%);
}
</style>
</head>

<body>
<div class="wrap">
		<button class="show-hide">Calendar</button>
		<div id="calendar" class="calendar hide">
				<h2>Calendar would be here</h2>
				<button class="show-hide">Close Calendar</button>
		</div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
$( ".wrap" ).on( "click", ".show-hide", function() {
  $('#calendar').toggleClass('hide');
});
</script>
</body>
</html>
4

Ι will look into your non-keyframe solution…but I must add there is an issue not solved yet.
When the use clicks the hide button(the X icon) the calendar sildes out of view(towards the right),it is still there though…the user just needs to scroll horizontally to see it…

What can I do in such a case?

Preserver the slide motion and at the same time the calendar totally gone.

5

That is solved in my example.:smile:

The overflow:hidden on the parent ensures the element is outside the current context and invisible.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.