Animating Dynamic Sized Content with CSS in Safari
This wizard has 3 steps. I want to animate the transitions between the 3 steps. On the first step, the user can click a "next" button. When they do this, the content of step 1 is pushed down and step 2 is revealed. Step 2 also has a "next" button that the user can click. When clicked, the content of step1 and step 2 are flipped over to show the content in step 3.
I have been successful in getting the card to flip in Safari if I use absolute heights. I have been able to get the container to dynamically grow as I need in Safari. However, I've been unable to get these two things to work together in Safari. I was able to do so in Chrome and Firefox though.
Currently, I have the following 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, the card flipping works. But, the container isn't rendering properly. I'm trying to get the lightgrey background behind the card to grow as the card grows. The background should grow when step 2 is revealed. But it doesn't. I can't use absolute heights because the content in each step is dynamic.
I've been able to get the background to dynamically grow. Or, I've been able to get the card to flip properly. But, I can't get them to work together in Safari.
Any help is appreciated.
I think you're unnecessarily complicating things. We can just use a 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
Okay, I think I've solved this. I will add a snippet later, but the idea is that you can add a spacer div with a height of your margin before your first card and after the last card. You then set the container height to auto and it should fix your problem.
EDIT : This should do it. Added a working fiddle. Enjoy.
Here is what the 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>上一篇: 不同步地显示权限说明