Question

尝试使用jQuery Mobile的标准图标在折叠或展开折叠时获得漂亮的旋转动画，但是我得到了一个奇怪的结果，标题中的整个可折叠标题都会旋转。

在我理想的解决方案中，我想简单地使用预定义的jQM图标类，而不需要为此目的添加额外的附加样式。

示例：icon-carat-u和icon-carat-d旋转180度，因此当折叠分别展开和折叠时，它们会动画。

此外，我尝试避免使用click事件，因为当我在代码collapsible("expand")或collapsible("collapse")中使用时，可折叠图标也应该是有效的。

这是我的代码：

.ui-icon-carat-d {
    transform: rotate(-180deg);
     transition: .3s;
}
.ui-icon-carat-u {
    transform: rotate(0deg);
    transition: .3s;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
  <div data-role="page" id="page-one">
    <div data-role="content">
      <div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
        <h4>Heading</h4>
        <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
      </div>
    </div>
  </div>
</body>

</html>

如何旋转标准 carat 图标以在jQuery Mobile可折叠标题中获得漂亮的平滑动画？

Answer 1

第一件事是第一件事 - 整个柱子在代码而不仅仅是插入符号中旋转的原因是.ui-icon-carat-d和.ui-icon-carat-u是栏上的类。插入符号图标位于该栏的::after pseudo-class中。

话虽如此，我将在序言中说这不是一个漂亮的解决方案，但它仍然是一个解决方案。

要理解为什么这不可能更简单，你必须意识到jQuery Mobile的样式表中发生了什么。从本质上讲，插入符号和颠倒的插入符号是单独的，不相关的SVG图标，它们被替换为CSS编码的背景图像。

正因为如此，这种变化无法按原样动画 - 浏览器对这些图像一无所知，而且肯定无法在它们之间做一个聪明的动画。

所以，我的解决方案首先复制/粘贴代表jQuery Mobile风格的“常规”插入符号的SVG背景图像，并强制它显示为颠倒状态，所以我们可以用传统的方式为它制作动画。

因此，我使用插入符号图标（::after伪类）定位元素，将常规插入符号SVG background-image应用于该元素，并强制它保留该图像切换的两种状态（带!important）。

然后，当jQuery Mobile添加.ui-icon-carat-u类（颠倒）时，图像不再更改，我们只需将图标旋转180度，使用transform，并使用{设置{ {1}}。

希望这有帮助！在下面测试。

transition

.ui-collapsible-heading-toggle::after {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FFFFFF%3B%22%20points%3D%2211.949%2C3.404%207%2C8.354%202.05%2C3.404%20-0.071%2C5.525%207%2C12.596%2014.07%2C5.525%20%22%2F%3E%3C%2Fsvg%3E") !important;
  transition: transform .3s;
}

.ui-icon-carat-u::after {
  transform: rotate(-90deg);
}

如何为jQuery Mobile可折叠标题的图标设置动画？

1 个答案: