CSSアニメーションをやっていないの移行右、上

Question

.ez-active 
    &.ez-fixed-top-right 
    position: fixed 
    right: 0 
    top: 0 
    transition: top 500ms ease-in-out 0s, right 500ms ease-in-out 0s 

を変更するとき、私はそれをクリックだとき、それは、右上にスライドしたい..しかし、それだけでテレポート何らかの理由。

Answer 1

更新：コードが完全に機能しているようです。遷移は、アクティブな状態ではなく、要素のデフォルトの状態に設定する必要があることに注意してください。

$(".clickable").click(function() { 
 
    $(this).toggleClass("ez-active"); 
 
})

.ez-fixed-top-right { 
 
    position: fixed; 
 
    right: 100px; 
 
    top: 100px; 
 
    transition: top 500ms ease-in-out 0s, right 500ms ease-in-out 0s; 
 
} 
 

 
.ez-active .ez-fixed-top-right { 
 
    position: fixed; 
 
    right: 0; 
 
    top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="clickable"> 
 
    <div class="ez-fixed-top-right"> 
 
    test 
 
    </div> 
 
</div>

編集：私は余分秒程度間違ってい判明。サンプルが機能しているので、あなたがそれを読んでいる場合に備えて、これをここに残しておきます。しかし、なぜそれが機能していないのかを理解するために、より多くのコードが必要になります。