끈적 끈적한 효과가 전환 후 엉망이되었습니다.

Question

나는 끈적 거리는 효과가있는 종류의 라디오 버튼을 만들려고합니다. 전환이 발생하는 동안 효과는 잘 보이지만 전환이 끝나면 효과가 엉망입니다 (색상이 잘 어우러 지거나 가장자리가 빛납니다).

저는 문제가 무엇인지 알아 내려고 노력해 왔습니다. 성공하지 못했습니다.

비디오 :

$('.register-option').click(function() { 
 
    $('.register-option').removeClass('selected'); 
 
    $(this).addClass('selected'); 
 
});

body { 
 
    background-color: rgb(158, 158, 158); 
 
} 
 

 
.register-choose { 
 
    -webkit-filter: url(#goo); 
 
    filter: url(#goo); 
 
} 
 

 
.register-choose .register-option { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 40px; 
 
    border-radius: 120px; 
 
    display: inline-block; 
 
    color: #000; 
 
    font-family: Tahoma; 
 
    line-height: 40px; 
 
    font-size: 12px; 
 
    background-color: #fff; 
 
    text-align: center; 
 
    -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1); 
 
    transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1); 
 
    background-repeat: no-repeat; 
 
} 
 

 
.register-choose .register-option.selected { 
 
    -webkit-transform: scale(1.1); 
 
    transform: scale(1.1); 
 
} 
 

 
.register-choose .register-option:first-of-type.selected { 
 
    background-color: rgb(0, 181, 255); 
 
} 
 

 
.register-choose .register-option:last-of-type.selected { 
 
    background-color: rgb(255, 118, 217); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="register-choose"> 
 
       <span class="register-option selected">Male</span> 
 
<span class="register-option">Female</span> 
 
</span> 
 

 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
\t \t <defs> 
 
\t \t \t <filter id="goo"> 
 
\t \t \t \t <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> 
 
\t \t \t \t <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 16 -6" result="goo" /> 
 
\t \t \t \t <feComposite in="SourceGraphic" in2="goo" operator="atop" /> 
 
\t \t \t </filter> 
 
\t \t </defs> 
 
\t </svg>

감사 : 여기

https://vimeo.com/248225026는 코드입니다.

Answer 1

이것은 Firefox 시각적 버그를 해결하는 마법의 주문입니다. 왜 작동하는지 모르겠지만 파이어 폭스 필터 코드의 올바른 부분을 걷어차는 것처럼 보입니다.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
     <defs> 
      <filter id="goo" > 
       <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> 
       <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 16 -6"/> 

    <feComponentTransfer result="goo"> 
     <feFuncA type="table" tableValues="0 .2 .4 .6 1 1"/> 
    </feComponentTransfer> 
      <<feComposite in="SourceGraphic" in2="goo" operator="atop" /> 
      </filter> 
     </defs> 
    </svg>