CSS偏移-路径沿弧线移动而不旋转

Question

我试图创建一个圆圈按钮，与“皮瓣”在一边，当你点击按钮，皮瓣应该沿着圆圈移动到底部。

皮瓣到达底部，但从旋转开始。在没有初始旋转的情况下，我怎么能把它沿着圆圈移动呢？

与此代码相关的问题。为什么襟翼不能点击？为什么光标即使设置在css中也不是指针？当动画不活动时，如何使动画反转？

谢谢

​

$(".kolecko").on('click', function(){
$(this).toggleClass('active');
});

.kolecko{
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: #001f49;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        position: relative;
        cursor: pointer;
        }
        .kolecko::after{
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          content: "\f138";
          width: 40px;
          height: 50px;
          position: absolute;
          left: 100%;
          top: 50%;
          transform: translate(-4px,-50%);
          background: #8bc1ff;
          line-height: 50px;
          font-size: 25px;
          z-index: -1;
          border-top-right-radius: 10px;
          border-bottom-right-radius: 10px;
          cursor:pointer;
        }
        
 .kolecko.active::after{
          content: "\f139";
          offset-path: path('M-75,-75 A75,75 -45 0,1 -75,75');
          animation: move 1000ms ease-in-out forwards;
        }
@keyframes move {
  0% {
    offset-distance: 50%;
  }
  100% {
    offset-distance: 100%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" 
href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" 
integrity="sha384- 
 B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" 
  crossorigin="anonymous">
<div class="kolecko" data-for="zalozit-klic">
                        <span class="chci">chci</span>
                        <span class="nazev-sluzby">ZALOŽIT s.r.o. NA KLÍČ</span>
                    </div>

​

Answer 1

修正了用svg背景元素替换“后缀”的问题。增加了动画来摇摆回来。

使用转换来翻转元素，并将其折叠到主圆圈下面。@laaouatni-anas使用翻译的启示

​

 $(".kolecko").on('click', function (){
            const data = $(this).data('for');

            if($(this).hasClass('active')){
                $(this).removeClass('active');
                $('.kolecko').not(this).removeClass('non-active');
                $(this).addClass('wasActive')
                    .delay(1000)
                    .queue(function(next){
                        $(this).removeClass('wasActive');
                        next();
                    });
            }
            else if($(this).hasClass('non-active')){
                $('.kolecko').not(this)
                    .removeClass('active')
                    .addClass('non-active wasActive')
                    .delay(1000)
                    .queue(function(next){
                        $(this).removeClass('wasActive');
                        next();
                    });
                $(this).removeClass('non-active').addClass('active');

            }
            else{
                $('.kolecko').not(this).addClass('non-active');
                $(this).addClass('active');

             
            }

    });

 .kolecko{
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: #001f49;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        position: relative;
        cursor: pointer;
 }
  .kolecko.active .ucho{
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1175 1175'%3E%3Cpath style='fill:%23ed174a' class='fil0' d='M957 1l-957 -1c65,184 101,381 101,587 0,206 -36,404 -101,587l957 1c120,0 218,-98 218,-218l0 -738c0,-120 -98,-218 -218,-218z'/%3E%3C/svg%3E");
          offset-path: path('M-75,-75 A75,75 0 0,1 -75,75');
          animation: move 1000ms ease-in-out forwards;
          transform: rotate(-90deg) translate(calc(50% - 4px),0);
  }
.kolecko.active .ucho::after{
            content: "\f137";
          }

.kolecko.wasActive .ucho{
        offset-path: path('M-75,-75 A75,75 0 0,1 -75,75');
        animation: moveback 1000ms ease-in-out forwards;
        transform: rotate(-90deg) translate(calc(50% - 4px),0);
 }
.ucho{
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1175 1175'%3E%3Cpath style='fill: %239BA1C6' class='fil0' d='M957 1l-957 -1c65,184 101,381 101,587 0,206 -36,404 -101,587l957 1c120,0 218,-98 218,-218l0 -738c0,-120 -98,-218 -218,-218z'/%3E%3C/svg%3E");
          background-repeat: no-repeat;
          width: 45px;
          height: 45px;
          background-size: 100% 100%;
          line-height: 45px;
          position: absolute;
          left: 100%;
          top: 50%;
          transform: translate(-4px,-50%);
          cursor: pointer;
}
.ucho::after{
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            content: "\f138";
            font-size:25px;
}


@keyframes move {
  0% {
    offset-distance: 50%;
  }

  100% {
    offset-distance: 100%;
  }
}
@keyframes moveback {
  0% {
    offset-distance: 100%;
  }

  100% {
    offset-distance: 50%;

  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" 
href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" 
integrity="sha384- 
 B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" 
  crossorigin="anonymous">
<div class="kolecko" data-for="zalozit-klic">
                        <span class="chci">chci</span>
                        <span class="nazev-sluzby">ZALOŽIT s.r.o. NA KLÍČ</span>
                        <span class="ucho">
                    </div>

​

Answer 2

不幸的是，我不知道如何用offset-path.来解决这个问题，但是我真的很想帮忙。

我们可以在一个特性中转换这个BUG :)

所以在你的@keyframe at 100%中我添加了一些transform属性..。所以你看不到的窃听器！

我添加的内容：

transform: rotate(-90deg) translateX(40%);

完整的@keyframe 代码：

@keyframes move {
    0% {
        offset-distance: 50%;
    }
    100% {
        offset-distance: 100%;
        transform: rotate(-90deg) translateX(40%);
    }
}

完整的固定代码片段：

​

$(".kolecko").on('click', function() {
  $(this).toggleClass('active');
});

.kolecko {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #001f49;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  position: relative;
  cursor: pointer;
}

.kolecko::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f138";
  width: 40px;
  height: 50px;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(-4px, -50%);
  background: #8bc1ff;
  line-height: 50px;
  font-size: 25px;
  z-index: -1;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  cursor: pointer;
}

.kolecko.active::after {
  content: "\f139";
  offset-path: path('M-75,-75 A75,75 -45 0,1 -75,75');
  animation: move 1000ms ease-in-out forwards;
}

@keyframes move {
  0% {
    offset-distance: 50%;
  }
  100% {
    offset-distance: 100%;
    transform: rotate(-90deg) translateX(40%);
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384- 
 B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="./script.js" defer></script>
</head>

<body>
  <div class="kolecko" data-for="zalozit-klic">
    <span class="chci">chci</span>
    <span class="nazev-sluzby">ZALOŽIT s.r.o. NA KLÍČ</span>
  </div>
</body>

</html>

​