尝试使用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>如何旋转标准克拉图标以在 jQuery Mobile 可折叠标题中获得漂亮的平滑动画？
首先 - 整个栏在你的代码中旋转而不仅仅是插入符号的原因是.ui-icon-carat-d和.ui-icon-carat-u是栏本身的类。插入符号图标位于该栏的伪类::after中。
话虽如此，我将首先说这不是一个漂亮的解决方案，但它仍然是一个解决方案。
要理解为什么这不能更简单，你必须意识到jQuery Mobile的样式表中发生了什么。本质上，插入符号和颠倒插入符号是单独的、不相关的 SVG 图标，它们被交换为 CSS 编码的背景图像。
因此，该更改不能按原样进行动画处理 - 浏览器对这些图像一无所知，当然也无法在它们之间执行巧妙的动画。
因此，我的解决方案首先复制/粘贴代表jQuery Mobile样式中的"常规"插入符号的SVG背景图像，并强制它也显示为颠倒状态，以便我们可以以传统方式对其进行动画处理。
因此，我以带有插入符号图标(::after伪类(的元素为目标，对其应用常规插入符号 SVGbackground-image，并强制它在切换的两个状态(带有!important(的情况下保持该图像。
然后，当jQuery Mobile添加.ui-icon-carat-u类(颠倒(时，图像不再更改，我们只需将图标旋转180度transform，然后用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);
}<!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>