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

编辑:原来我对额外秒数的看法是错误的。我暂时把它留在这里，以防你正在阅读它，因为这个示例是有功能的。但是我们将需要您的更多代码来弄清楚为什么它不起作用。