我一直在尝试使用一些不同的格式来使用细节/摘要，并且我一直在尝试使用一个翻转卡。我已经在Chrome中完成了大部分，只使用了CSS(没有JS)，唯一的问题是当卡片翻回到前面时，文本稍微提前消失了，这对我来说是有意义的，因为元素在点击时会立即关闭。
不合理的是，Safari似乎拒绝运行details元素中某些元素的过渡。我在下面附上了一个剪报。它可以在其他浏览器中工作，我创建了一个具有相同结构和风格的版本，但只使用了divs，也可以工作。我可以使用CSS动画让它在将卡片翻到背面时工作，但当将卡片翻到正面时(即移除动画样式)，它只是捕捉到它的初始位置而没有过渡，所以这不是一个真正的解决方法。此外，当我使用inspector并调整应该过渡的元素时，它工作得很好——但当打开/关闭details元素时，它仍然只是捕捉。
有没有什么方法可以解决这个大家都知道的问题？谢谢你的帮助！
body {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #fefefe;
perspective: 1000px;
margin: 0;
font-size: 1.25rem;
line-height: 1.875rem;
}
html * {
box-sizing: border-box;
}
details {
width: 300px;
height: 400px;
transform-style: preserve-3d;
position: relative;
cursor: pointer;
}
.front,
.back,
summary:before {
position: absolute;
width: 100%;
height: 100%;
left: 0;
padding: 1rem;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
/* transform-style: preserve-3d; */
transition: all .75s cubic-bezier(0.52, 0.02, 0.28, 1);
-webkit-transition: all .75s cubic-bezier(0.52, 0.02, 0.28, 1);
}
.front,
summary:before {
background: white;
border-radius: 9px;
border: 3px solid orange;
box-shadow: 0 0 32px -8px rgba(0, 0, 0, 0.33);
}
summary {
list-style: none;
position: absolute;
width: 100%;
height: 100%;
left: 0;
transform-style: preserve-3d;
}
summary:before {
border-color: blue;
content: '';
box-sizing: border-box;
background: none;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transition: all .75s cubic-bezier(0.52, 0.02, 0.28, 1);
-webkit-transition: all .75s cubic-bezier(0.52, 0.02, 0.28, 1);
}
.front {
background-color: orange;
color: white;
}
summary::-webkit-details-marker,
summary::marker {
display: none;
}
.back {
overflow-y: scroll;
pointer-events: none;
transform: rotateY(180deg);
/* transform-style: preserve-3d; */
}
.back p {
margin: 0;
}
details[open] .front {
transform: rotateY(180deg);
}
details[open] .back {
/* transform: rotateY(360deg);
-webkit-transform: rotateY(360deg); */
animation: back .75s cubic-bezier(0.52, 0.02, 0.28, 1) forwards;
-webkit-animation: back .75s cubic-bezier(0.52, 0.02, 0.28, 1) forwards;
}
details[open] summary:before {
transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
transition: all .75s cubic-bezier(0.52, 0.02, 0.28, 1);
-webkit-transition: all .75s cubic-bezier(0.52, 0.02, 0.28, 1);
/* animation: back .75s cubic-bezier(0.52, 0.02, 0.28, 1) forwards;
-webkit-animation: back .75s cubic-bezier(0.52, 0.02, 0.28, 1) forwards; */
}
@keyframes back {
from {
transform: rotateY(180deg);
}
to {
transform: rotateY(360deg);
}
}<html>
<body>
<details>
<summary>
<div class="front">Front of Card</div>
</summary>
<div class="back">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.</p>
</div>
</details>
</body>
</html>不管怎样，我看到的就是这个。对我来说，将样式应用到open属性本身似乎是一个问题——如果我使用javascript辅助来添加和删除一个open类，转换会工作得很好。其他浏览器也很好用。
看起来我们可能会遇到这个WebKit bug。