Animating dynamic content with CSS in Safari

Question

This wizard has 3 steps. I want to animate the transitions between the three steps. At the first stage, the user can click the "Next" button. When they do this, the contents of step 1 are pushed down and step 2 is displayed. Step 2 also has a “Next” button that the user can click. When clicked, the contents of steps 1 and 2 are flipped to display the contents in step 3.

I managed to get the map in Safari if I use absolute heights. I was able to get a container for dynamic growth, as I need in Safari. However, I was not able to get these two things to work together in Safari. I was able to do this in Chrome and Firefox though.

I currently have Bootply . Which has the following structure:

  <section class="container"> <div id="card"> <figure class="front"> <div class="step-2-default" id="step2" style="overflow-x:hidden; padding:0.0rem 1.0rem;"> <label>Step 2</label> <p>These are the details of the second step</p> <button id="nextButton2">next</button> </div> <div class="step-1-default" id="step1"> <label>Step 1</label> <p>These are the details of the first step</p> <button id="nextButton1">next</button> </div> </figure> <figure class="back"> <div id="step3"> <label>Step 3</label> <p>Thank you for using this wizard</p> </div> </figure> </div> </section> 

In this Bootply, discarding works. But container not handled properly. I am trying to get a light background behind the map in order to grow as the map grows. The background should grow when step 2 is shown. But it is not. I cannot use absolute heights because the content at each step is dynamic.

I managed to get a background for dynamic growth. Or, I was able to get a card to flip properly. But I can not get them to work together in Safari.

Any help is appreciated.

Answer 1

I think you unnecessarily complicate things. We can just use the border here:

 #card figure { border: 10px solid #808080; display: block; height: auto; width: 100%; color: #fff; text-align: center; font-weight: bold; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } 

http://www.bootply.com/7Q9RMtpv3F

Answer 2

Ok, I think I solved it. I will add a fragment later, but the idea is that you can add a div divider with the height of the field to the first map and after the last map. Then you set the container height automatically, and this should fix your problem.

EDIT . That should do it. Added working fiddle. Enjoy it.

This is what HTML should look like

 window.onload = init() function init(){ var card1 = document.getElementById('card-1') var card2 = document.getElementById('card-2') var card3 = document.getElementById('card-3') card2.style.display = 'none' card3.style.display = 'none' function addButton(el){ var newButton = document.createElement('button') var buttonAttribute = document.createAttribute('id') buttonAttribute.value = 'next-button' newButton.setAttributeNode(buttonAttribute) newButton.textContent = 'Next' el.appendChild(newButton) return newButton } var nextButton = addButton(card1) nextButton.addEventListener('click',function(){ this.parentElement.removeChild(this) var nextButton = addButton(card2) card2.style.display = 'block' nextButton.addEventListener('click',function(){ card3.style.display = 'block' card3.style.display = 'flip2 1.5s ease-in-out 0s forwards' container.style.animation = 'flip 1.5s ease-in-out 0s forwards' }) }) } 

 *, html, body{box-sizing: border-box; color: white;} html, body{margin: 0;} #container{ width: calc(200px + 20px); height: auto; background: grey; position: relative; margin: auto; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; } .space{height: 10px} .card{ background: red; height: 140px; width: 200px; margin-left: auto; margin-right: auto; padding: 5px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } #card-3{ background: blue; top: 10px; left: 10px; height: 280px; position: absolute; -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); } @keyframes flip{ 0%{ -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY( 0deg ); -moz-transform: rotateY( 0deg ); -o-transform: rotateY( 0deg ); transform: rotateY( 0deg ); } 100%{ -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); } } @keyframes flip2{ 0%{ -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY( 0deg ); -moz-transform: rotateY( 0deg ); -o-transform: rotateY( 0deg ); transform: rotateY( 0deg ); } 100%{ -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); } 

 <div id="container"> <div class="space"></div> <div id="card-1" class="card"> <p>Step 1</p> <p>These are the steps of step one</p> </div> <div id="card-2" class="card"> <p>Step 2</p> <p>These are the steps of step two</p> </div> <div id="card-3" class="card"> <p>Step 3</p> <p>This is the end</p> </div> <div class="space"></div> </div>