改变右侧和顶部时，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>

编辑：原来我错了多余的秒数。我现在就把它留在这里以防你正在阅读它，因为样本是有用的。但是我们需要更多的代码来弄清楚它为什么不起作用。