文章/答案/技术大牛

发布

社区首页 >问答首页 >如何动画jQuery移动可折叠标题的图标？

问如何动画jQuery移动可折叠标题的图标？
EN

Stack Overflow用户

提问于 2017-08-17 22:48:07

回答 1查看 593关注 0票数 2

试图使用标准图标的jQuery移动获得一个良好的旋转动画时，可折叠或展开，但我得到一个奇怪的结果，标题中的整个可折叠标题被旋转。

在我理想的解决方案中，我只想简单地使用预定义的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移动可折叠标题中旋转标准克拉图标以获得良好的平滑动画？

css

jquery-mobile

css-transitions

jquery

回答 1

Stack Overflow用户

发布于 2017-08-18 01:23:08

第一件事--整个条形图之所以在代码中旋转，而不仅仅是插入符号，是因为.ui-icon-carat-d和.ui-icon-carat-u本身就是条形图上的类。插入符号图标位于该条的 pseudo-class中。

话虽如此，我在开场白前说，这不是一个美丽的解决方案，但它仍然是一个解决方案。

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

正因为如此，这种改变不能像现在这样被动画化--浏览器对这些图像一无所知，当然也不能在它们之间做一个巧妙的动画。

所以，我的解决方案从复制/粘贴SVG背景图像开始，该图像表示jQuery移动样式中的“常规”插入符号，并迫使它也为颠倒状态显示，这样我们就可以以传统的方式对其进行动画化。

因此，我用插入符号图标(一个::after伪类)定位元素，将常规的插入符号SVG background-image应用到它，并强迫它为切换的两种状态(带有!important)保持该图像。

然后，当jQuery移动添加.ui-icon-carat-u类(倒置)时，图像不再改变，我们只需用transform旋转图标180度，然后用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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45746013

复制

相似问题

问如何动画jQuery移动可折叠标题的图标？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何动画jQuery移动可折叠标题的图标？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何动画jQuery移动可折叠标题的图标？
EN