在Safari中使用CSS动态调整大小的内容
该向导有3个步骤。 我想让这3个步骤之间的过渡动画化。 第一步，用户可以点击“下一步”按钮。 当他们这样做时，步骤1的内容被压下并且步骤2被显示。 第2步还有一个“下一个”按钮，用户可以点击。 单击时，步骤1和步骤2的内容将翻转以显示步骤3中的内容。
如果我使用绝对高度，我已经成功获得了卡片在Safari中的翻转。 我已经能够在Safari中根据需要动态增加container 。 但是，我一直无法让这两件事在Safari中一起工作。 尽管我可以在Chrome和Firefox中这样做。
目前，我有以下Bootply。 它具有以下结构：
<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>
在这个Bootply中，卡片翻转起作用。 但是， container渲染不正确。 我试图让卡背后的lightgrey背景随着卡的增长而增长。 第2步显示时，背景应该会增长。 但事实并非如此。 我无法使用绝对高度，因为每个步骤中的内容都是动态的。
我已经能够获得动态增长的背景。 或者，我已经能够让卡片正确翻转。 但是，我无法让他们在Safari中一起工作。
任何帮助表示赞赏。
我认为你不必要的复杂化。 我们可以在这里使用边框：
#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
好的，我想我已经解决了这个问题。 我将在稍后添加一段代码，但是您的想法是，您可以在第一张牌之前和最后一张牌之后添加一个间距为您的保证金高度的div。 然后将容器高度设置为自动，它应该可以解决您的问题。
编辑 ：这应该做到这一点。 增加了一个工作小提琴。 请享用。
这是HTML的样子
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>