Don Rhummy Don Rhummy - 4 days ago 6
CSS Question

How move divs up/down using CSS animation without a "blink" between directions?

I'm trying to move these divs up and down based on clicks:


  • Initial click moves them up

  • Next Click moves them down (then repeat on next clicks)



Moving them up works well, but when i click to move them down, they flash invisible first and then move down. What am I doing wrong?

JSFiddle: https://jsfiddle.net/9q0scpa0/

HTML:

<div class="page" id="page1" onclick="restart()">
Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>
Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>
Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>
Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>
</div>
<div class="page" id="page2" onclick="restart()">
Page 2
</div>


CSS:

*
{
margin: 0em;
padding: 0em;
}

html
{
height: 100%;
width: 100%;
}

body
{
height: 100%;
width: 100%;
overflow: hidden;
}

.page
{
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
background-color: red;
}

@keyframes moveNext
{
0% {
transform: translate(0em,100%);
-webkit-transform: translate(0em,0%);
-moz-transform: translate(0em,0%);
}

100% {
transform: translate(0em,-100%);
-webkit-transform: translate(0em,-100%);
-moz-transform: translate(0em,-100%);
}
}

@keyframes movePrevious
{
0% {
transform: translate(0em,-100%);
-webkit-transform: translate(0em,-100%);
-moz-transform: translate(0em,-100%);
display: block;
}

100% {
transform: translate(0em,0%);
-webkit-transform: translate(0em,0%);
-moz-transform: translate(0em,0%);
}
}

#page1.leave
{
z-index: 0;
animation-name: moveNext;
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
animation-duration: 800ms;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}

#page2.enter
{
background-color: blue;
z-index: 1;
animation-name: moveNext;
animation-duration: 750ms;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}

#page1.enter
{
z-index: 0;
animation-name: movePrevious;
animation-duration: 800ms;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}

#page2.leave
{
background-color: blue;
z-index: 1;
animation-name: movePrevious;
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
animation-duration: 750ms;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}


JavaScript:

var isMoveNext = true;
var page1 = document.getElementById( "page1" );
var page2 = document.getElementById( "page2" );

window.restart = function()
{
//Moving next
if ( isMoveNext )
{
page1.className = "page leave";
page2.className = "page enter";
isMoveNext = false;
}

else
{
page1.className = "page enter";
page2.className = "page leave";
isMoveNext = true;
}
}

Answer

Add one more transition translate(0em,-100%) in #page2.leave to remove the blink

var isMoveNext = true;
var page1 = document.getElementById( "page1" );
var page2 = document.getElementById( "page2" );

window.restart = function()
{
	//Moving next
  if ( isMoveNext )
  {
		page1.className = "page leave";
    page2.className = "page enter";
    isMoveNext = false;
  }
  
  else
  {
  	page1.className = "page enter";
    page2.className = "page leave";
    isMoveNext = true;
  }
}
*
{
  margin: 0em;
  padding: 0em;
}

html
{
  height: 100%;
  width: 100%;
}

body
{
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.page
{
  position: relative;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: red;
}

@keyframes moveNext
{
  0% {
		transform: translate(0em,100%);
		-webkit-transform: translate(0em,0%);
		-moz-transform: translate(0em,0%);
	}
	
	100% {
		transform: translate(0em,-100%);
		-webkit-transform: translate(0em,-100%);
		-moz-transform: translate(0em,-100%);
	}
}

@keyframes movePrevious
{
  0% {
		transform: translate(0em,-100%);
		-webkit-transform: translate(0em,-100%);
		-moz-transform: translate(0em,-100%);
    display: block;
	}
	
	100% {
		transform: translate(0em,0%);
		-webkit-transform: translate(0em,0%);
		-moz-transform: translate(0em,0%);
	}
}

#page1.leave
{
  z-index: 0;
  animation-name: moveNext;
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
  animation-duration: 800ms;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

#page2.enter
{
  background-color: blue;
  z-index: 1;
  animation-name: moveNext;
  animation-duration: 750ms;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

#page1.enter
{
  z-index: 0;
  animation-name: movePrevious;
  animation-duration: 800ms;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

#page2.leave
{
  background-color: blue;
  z-index: 1;
  animation-name: movePrevious;
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
  animation-duration: 750ms;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
      transform: translate(0em,-100%);
        -webkit-transform: translate(0em,-100%);
        -moz-transform: translate(0em,-100%);
}
<div class="page" id="page1" onclick="restart()">
Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>
Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>
</div>
<div class="page" id="page2" onclick="restart()">
Page 2
</div>

Comments