jquery 如何使用CSS转换将加号变形为减号？

yx2lnoni  于 2024-01-07  发布在  jQuery
关注(0)|答案(5)|浏览(161)

我想创建一个toggle button，将其形状从加号变为减号。

只使用CSS，*不使用 * 伪元素。

我想要的效果是让“+”号中的垂直线缩小为水平线。
我知道这是可能的，但我不确定哪一个是最好的路线，我想做一些与height，但我担心的line-height的浏览器改变其在元素中的位置。

  1. $('button').on("click", function(){
  2.   $(this).toggleClass('active');
  3. });
  1. button {
  2. color: #ecf0f1;
  3. background:  #e74c3c;
  4.   width: 50px;
  5.   height: 50px;
  6.   border: 0;
  7.   font-size: 1.5em;
  8.   }
  9. button span {
  10.   transition: all .75s ease-in-out;
  11.   }
  12. button.active span {
  13.   /* Code to morph + to - */
  14.   }
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  2. <button><span>+</span></button>
jquery

5条答案

按热度按时间
n8ghc7c1

n8ghc7c11#

由于形状的简单性，最简单的方法就是使用元素来创建+和-。使用伪元素是最干净的解决方案，但您也可以只使用DOM元素，并拥有稍微混乱的文档结构。
考虑到这一点，实际的解决方案是简单的。我们使用CSS来定位元素，使其与所需的字符相似，然后通过动画显示该位置来在它们之间“变形”。
看看下面的代码，并尝试理解每个规则的功能。

  1. button {
  2.   color: #ecf0f1;
  3.   background: #e74c3c;
  4.   width: 50px;
  5.   height: 50px;
  6.   border: 0;
  7.   font-size: 1.5em;
  8.   position: relative;
  9. }
  11. button span {
  12.   position: absolute;
  13.   transition: 300ms;
  14.   background: white;
  15.   border-radius: 2px;
  16. }
  18. /* Create the "+" shape by positioning the spans absolutely */
  19. button span:first-child {
  20.   top: 25%;
  21.   bottom: 25%;
  22.   width: 10%;
  23.   left: 45%;
  24. }
  26. button span:last-child {
  27.   left: 25%;
  28.   right: 25%;
  29.   height: 10%;
  30.   top: 45%;
  31. }
  33. /* Morph the shape when the button is hovered over */
  34. button:hover span {
  35.   transform: rotate(90deg);
  36. }
  38. button:hover span:last-child {
  39.   left: 50%;
  40.   right: 50%;
  41. }

个字符

展开查看全部
赞(0）分享  回复(0）举报  2024-01-07
gj3fmq9x

gj3fmq9x2#

注意：请停止编辑问题，使答案不正确

CSS解决方案

  1. $('button').on("click", function(){
  2.   $(this).toggleClass('active');
  3. });
  1. button {
  2.   color: #ecf0f1;
  3.   background: #e74c3c;
  4.   width: 70px;
  5.   height: 70px;
  6.   position: relative;
  7.   font-size: 50px;
  8.   cursor: pointer;
  9.   border: 0;
  10.   outline: 0;
  11.   padding: 0
  12. }
  13. .plus,
  14. .minus {
  15.   color: #fff;
  16.   padding: 10px;
  17.   width: 70px;
  18.   height: 70px;
  19.   line-height: 50px;
  20.   display: block;
  21.   position: absolute;
  22.   top: 0;
  23.   left: 0;
  24.   right: 0;
  25.   bottom: 0;
  26.   text-align: center;
  27.   box-sizing: border-box;
  28.   transition: .5s all ease-out;
  29. }
  30. .plus {
  31.   opacity: 1;
  32.   transform: rotate(0deg);
  33. }
  34. button.active .plus {
  35.   opacity: 0;
  36.   transform: rotate(90deg);
  37. }
  38. .minus {
  39.   opacity: 0;
  40.   transform: rotate(-90deg);
  41. }
  42. button.active .minus {
  43.   opacity: 1;
  44.   transform: rotate(0deg);
  45. }
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  2. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
  3. <button>
  4.   <span class="plus"><i class="fa fa-plus"></i></span>
  5.   <span class="minus"><i class="fa fa-minus"></i></span>
  6. </button>

一个（旧）CSS解决方案：

使用具有content属性的伪元素::before

  1. $('button').on("click", function() {
  2.   $(this).toggleClass('active');
  3. });

x

  1. button {
  2.   color: #ecf0f1;
  3.   background: #e74c3c;
  4.   width: 50px;
  5.   height: 50px;
  6.   border: 0;
  7.   font-size: 1.5em;
  8. }
  9. button span {
  10.   transition: all .75s ease-in-out;
  11.   position:relative
  12. }
  13. button span::before {
  14.   content:"+"
  15. }
  16. button.active span::before {
  17.   content:"-"
  18. }
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  2. <button><span></span></button>

的一个字符串

一个（旧的）jquery解决方案：

不需要span，你可以在jquery中使用text()和if语句来实现这一点。

  1. $('button').on("click", function() {
  2.   $(this).toggleClass('active');
  3.   $(this).text() == "+" ? $(this).text("-") : $(this).text("+");
  4. });
  1. button {
  2.   color: #ecf0f1;
  3.   background: #e74c3c;
  4.   width: 50px;
  5.   height: 50px;
  6.   border: 0;
  7.   font-size: 1.5em;
  8.   transition: all .75s ease-in-out;
  9. }
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  2. <button>+</button>
展开查看全部
赞(0）分享  回复(0）举报  2024-01-07
shyt4zoc

shyt4zoc3#

啊，我的错，我忽略了OP不想使用任何伪元素。但是伪元素的最大好处是你有更少的HTML代码和更干净的结构。
这也是一个不同的 * 变形 * 动画作为OP希望，但也许别人可以使用这个。
所以如果你不介意的话，我就把我的建议放在那里。
像这样的？

超文本标记语言

  1. <div class="button"></div>

字符串

CSS

  1. * {
  2.   box-sizing: border-box;
  3. }
  5. html,
  6. body {
  7.   height: 100%;
  8. }
  10. body {
  11.   margin: 0;
  12.   background: #343838;
  13. }
  15. .button {
  16.   position: absolute;
  17.   width: 55px;
  18.   height: 55px;
  19.   background: #70975B;
  20.   top: 50%;
  21.   left: 50%;
  22.   transform: translate(-50%, -50%) rotate(0deg);
  23.   border-radius: 50%;
  24.   cursor: pointer;
  25.   z-index: 100;
  26.   transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1);
  27. }
  29. .button:after {
  30.   content: '';
  31.   position: absolute;
  32.   top: 50%;
  33.   left: 50%;
  34.   transform: translate(-50%, -50%);
  35.   height: 2px;
  36.   width: 50%;
  37.   background: white;
  38. }
  40. .button:before {
  41.   content: '';
  42.   position: absolute;
  43.   top: 50%;
  44.   left: 50%;
  45.   transform: translate(-50%, -50%);
  46.   height: 50%;
  47.   width: 2px;
  48.   background: white;
  49. }
  51. .button.clicked {
  52.   transform: translate(-50%, -50%) rotate(360deg);
  53.   background: #CC2A41;
  54. }
  56. .button.clicked:before {
  57.   width: 0;
  58. }

型

jQuery查询

  1. $(".button").click(function() {
  2.   $(this).toggleClass("clicked");
  3. });

型
这里有一个工作示例http://codepen.io/svelts/pen/LkyZoZ

展开查看全部
赞(0）分享  回复(0）举报  2024-01-07
gmxoilav

gmxoilav4#

我想在写完这篇文章后，我会展示一个同时发生多个转换的例子，以给予一个“抛光”的外观。
我还添加了一个“点击”事件，以保持交叉点击。

  1. .toggleIcon {
  2.         position: relative;
  3.         width: 50px; /* Define the size of your toggle icon */
  4.         height: 50px;
  5.         background: #ffffff; /* Set the background color */
  6.         border-radius: 50%; /* Make it round */
  7.         display: inline-flex;
  8.         align-items: center;
  9.         justify-content: center;
  10.         cursor: pointer;
  11.     }
  13.     .toggleIcon::after,
  14.     .toggleIcon::before {
  15.         position: absolute;
  16.         content: '';
  17.         height: 30px;
  18.         width: 2px;
  19.         background: #1A0D07;
  20.         left: 50%;
  21.         top: 50%;
  22.         transition: transform 0.4s ease;
  23.         transform: translate(-50%, -50%);
  24.     }
  25.     .toggleIcon.toggleActive::before {
  26.         transition: transform 0.2s ease;
  27.     }
  29.     .toggleIcon::before {
  30.         transform: translate(-50%, -50%) rotate(90deg);
  31.     }
  33.     .toggleIconParent:hover .toggleIcon::before,
  34.     .toggleIcon:hover::before,
  35.     .toggleIcon:active::before{
  36.         transform: translate(-50%, -50%) rotate(0deg) scale(1.2);
  37.     }
  39.     .toggleIcon:hover::after,
  40.     .toggleIconParent:hover .toggleIcon::after,
  41.     .toggleIcon:active::after,
  42.     .toggleIcon.toggleActive::after {
  43.         transform: translate(-50%, -50%) rotate(-90deg) scale(1.2);
  44.     }
  46.     .toggleIcon.toggleActive::before {
  47.         transform: translate(-50%, -50%) rotate(90deg) scale(1.2);
  48.     }
  50.     .toggleIcon.toggleActive::after,
  51.     .toggleIcon.toggleActive::before {
  52.         width: 1px;
  53.     }

个字符

展开查看全部
赞(0）分享  回复(0）举报  2024-01-07
tjjdgumg

tjjdgumg5#

试试这个

  1. $('button').on("click", function() {
  2.   var $this = $(this);
  3.   $this.toggleClass('toggle');
  4.   if ($this.hasClass('toggle')) {
  5.     $this.text('+');
  6.   } else {
  7.     $this.text('-');
  8.   }
  9. });
  1. button {
  2.   color: #ecf0f1;
  3.   background: #e74c3c;
  4.   width: 50px;
  5.   height: 50px;
  6.   border: 0;
  7.   font-size: 1.5em;
  8.   transition: all .75s ease-in-out;
  9. }
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  2. <button class="toggle">+</button>
展开查看全部
赞(0）分享  回复(0）举报  2024-01-07
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com