Question

最近几天，我一直在摆弄纯CSS手风琴。本质上，我不知道自己在做什么，但是我发现了一些例子，将我推向正确的方向。我现在开始工作了。好吧！

在您进一步阅读之前，我创建了一个codepen。我认为能够检查我正在谈论的代码可能会有所帮助。你知道，我正在努力帮助你...

手风琴有一个圆形的SVG元素，我将其包裹在<label>标签中，用于扩展和折叠手风琴。点击SVG（或实际上是标签）后，系统会检查radio输入，然后启动transform: rotate(45deg); SVG的动画。它还触发行的扩展。每行还有第二个radio输入，还可以使用SVG再次折叠该行。

我认为（希望）您刚刚阅读的这些详细信息与我的实际问题无关！但是也许他们是这样，所以我想提供一些背景信息。无论如何，当我在文档中不适当地摆弄它时，它似乎是the effect I want：

<!DOCTYPE html>
<html>
<head>
  ...
</head>
<body>
  ...
<body>

但是，一旦我添加了这些动画，现在动画就发生了变化，除了旋转之外，SVG还会稍微移动位置（如果我没记错的话，请向右下方）。这就是the effect I don't want！

我看到的是什么效果？是因为实际上是标签的旋转元件不是方形的吗？那么，为什么只有在HTML格式正确的情况下才会发生这种情况？

如果很重要，GIFS会记录在Safari中（我也用它来预览代码）。但是codepen也显示了 shifting 。我可能搜索了错误的术语，但似乎找不到答案。

Answer 1

第一条建议-不要忘记为绝对元素设置x和y位置，这可能会在某些浏览器中引起问题。而您的问题出在label（faq-btn）中，因为它是矩形，但是为了获得良好的动画效果，它应该是正方形。

这是两个类的解决方法：

.faq-row {
    position: relative;
    line-height: 30px;
    font-size: 24px;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 700;
    margin-bottom: 20px;
}

.faq-btn {
    display: flex;
    position: absolute;
    top: 0;
    left: 400px;
    transition: all 1s ease-out;
}

SVG旋转时会移动位置

1 个答案: