初めてのJavaScript/CSSの切り替え

Question

私は最初のクリックでスイングを回してから、2回目のクリックでスムーズに元の位置にスイングしようとしています。私は次のコードを持っています。

HTML：

<div class="quick-access"> 
    <div class="quick-access__toggle"> 
    <svg id="toggle-button" viewBox="0 0 100 100" > 
     <path d="M 50 30 L 50 70" stroke="white" stroke-width="5"/> 
     <path d="M 30 50 L 70 50" stroke="white" stroke-width="5"/> 
    </svg> 
    </div> 
</div> 

はSCSS：

$colour-orange: #faab18; 

.quick-access{ 
    position: absolute; 
    bottom: 20px; 
    right: 20px; 
    &__toggle{ 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    background: $colour-orange; 
    } 
} 

.open{ 
    background: white; 
    svg{ 
    transition-property: transform; 
    transition-duration: 0.7s; 
    path{ 
     stroke: $colour-orange; 
    } 
    } 
} 

.overlay{ 
    background: rgba(30,30,30,0.6); 
} 

JS：

$('.quick-access__toggle').on('click', function(){ 
    $(this).toggleClass('open'); 
    if($(this).hasClass('open')){ 
    $('#toggle-button').css('transform', 'rotate(225deg)'); 
    }else{ 
    $('#toggle-button').css('transform', 'rotate(0deg)'); 
    } 

    $('body').toggleClass('overlay') 
}) 

私は起こるしたいどのようなSVGは、もう一度クリックする上でクリックで225degに周りにスピンされますそれは0degのまわりを回転します。現在は225°に回転していますが、2回目のクリックでは最初のクリックのようにスムーズに回転しません。元の位置に戻ります。トランジションプロパティとトランジションデュレーションはこれを行うと思っていましたが、最初のクリックに対してのみ機能します。私はjsアニメーションをしようとしましたが、変換をサポートしていませんし、むしろプラグインやpolyfillを使用してその作業を行うことはありません。

Answer 1

openクラスが要素に追加されると、transformルールが追加されるだけですが、rotate()プロパティが同時に追加されるため、アニメーションがありません。

transformルールをデフォルト状態の.quick-access__toggleに定義する必要があります。次に、rotate()のルールを修正する要素でCSSクラスを切り替えることができます。 transitionは2つの状態の間で滑らかになり、JSコードははるかに簡潔です。

$('.quick-access__toggle').on('click', function() { 
 
    $(this).toggleClass('open'); 
 
    $('body').toggleClass('overlay') 
 
})

.quick-access { 
 
    position: absolute; 
 
    bottom: 20px; 
 
    right: 20px; 
 
} 
 

 
.quick-access__toggle { 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 50%; 
 
    background: #faab18; 
 
} 
 

 
.quick-access__toggle svg { 
 
    transition: transform 0.7s; 
 
    transform: rotate(0deg); 
 
} 
 
.open { 
 
    background: white; 
 
} 
 

 
.open svg { 
 
    transform: rotate(225deg); 
 
} 
 

 
.open path { 
 
    stroke: #faab18; 
 
} 
 

 
.overlay { 
 
    background: rgba(30, 30, 30, 0.6); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="quick-access"> 
 
    <div class="quick-access__toggle"> 
 
    <svg id="toggle-button" viewBox="0 0 100 100"> 
 
     <path d="M 50 30 L 50 70" stroke="white" stroke-width="5"/> 
 
     <path d="M 30 50 L 70 50" stroke="white" stroke-width="5"/> 
 
    </svg> 
 
    </div> 
 
</div>

私はスニペットが動作するために昔ながらのCSSにごSCSSを変換しなければならなかったが、戻って変換するのは簡単でなければなりません。注：これを試してみてください。