旋转箭头问题

Question

所以我做了一个常见问题解答。一切都运行良好，除了我希望在单击特定列表元素时离子图标旋转 90 度。这是我拥有的 6 个 HTML 积木之一

<li class = "q"><i class = "ion-arrow-down-a"></i> Lorem ipsum dolor sit amet,kdfssdfksdfkdfskfsdkfdskfdskkfdskfdskdsf</li>

 <li class = "a">blahfshfshbshhaj JFDSJSDFJFSDJFSDJFSDJFJDSJFSDJFSDJFDJFDJFSDJ</li>

我还有大约 6 个这样的。现在我的 jQuery 才是真正的问题所在。 slideUp(); 部分之前的所有内容都工作正常。但是离子图标根本不旋转。

var action = "click";
var speed = 500;

$(document).ready(function(){
    $('li.q').on(action,function(){
        $(this).next()
            .slideToggle(speed).
            siblings('li.a').
        slideUp();
    var i = $(this).children('i');
    $('i').not(i).removeClass('rotate');
    i.toggleClass('rotate');
    });
});

在我的CSS我也做了一个轮换class

.rotate
{
    transform:rotate(90deg);
}

感谢任何帮助

Answer 1

正如 Harry 在中提到的，主要原因是 i element.so 的显示设置，将转换添加到伪元素是执行此操作的另一种选择。

如果您查看 ionicons.css，ion-arrow-down-a class 的 css 是：

.ion-arrow-down-a:before { content: "\f103"; }

::before 创建一个伪元素，它是匹配元素的第一个子元素。伪元素被添加到选择器中，但它们不是描述特殊状态，而是允许您为文档的某些部分设置样式。例如，::first-line 伪元素仅以选择器指定的元素的第一行为目标。因此，根据 ionicon.css，您也可以在 class 名称之后使用 :before 进行转换。

您可以像这样更改 class：

.rotate:before
{
   transform:rotate(90deg);
}

或添加此 css 样式：

i {
   display: inline-block;
}

工作样本HERE

Answer 2

原因

与另一个答案中最初提到的相反，问题是不是因为class被添加到 i 元素。而是是因为display元素的设置 .

CSS transform 对行内元素不起作用。它们仅适用于显示为 block、inline-block、inline-table 等的元素。以下是 W3C Spec:

的摘录

transformable element

A transformable element is an element in one of these categories:

an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]

an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform [SVG11].

atomic inline-level element

Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes

默认情况下大多数浏览器将i元素设置为display: inline。因此，当 transform 应用于它时（通过 rotate class），它根本没有任何效果。也就是说，元素不旋转（因此，伪元素也保持不旋转）。

当您直接将 transform 设置为 rotate:before 时它会起作用，因为大多数浏览器都将其 display 设置为 inline-block。

解决方案

改变display的 i 元素为 inline-block。这意味着旋转变换实际上会产生效果。

当您向元素添加 transform 时，其所有子元素（包括伪元素）都将受到转换的影响，因此无需将 class 设置为伪元素.

var action = "click";
var speed = 500;

$(document).ready(function() {
  $('li.q').on(action, function() {
    $(this).next()
      .slideToggle(speed).
    siblings('li.a').
    slideUp();
    var i = $(this).children('i');
    $('i').not(i).removeClass('rotate');
    i.toggleClass('rotate');
  });
});

.rotate {
  transform: rotate(90deg);
}

/* add this setting */

i {
  display: inline-block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="q"><i class="ion-arrow-down-a"></i> Lorem ipsum dolor sit amet,kdfssdfksdfkdfskfsdkfdskfdskkfdskfdskdsf</li>

<li class="a">blahfshfshbshhaj JFDSJSDFJFSDJFSDJFSDJFJDSJFSDJFSDJFDJFDJFSDJ</li>

旋转箭头问题

Rotating arrow issue

css

jquery

css-transforms

原因

解决方案