Question

我有这个

ul{
    -webkit-transition: all 1000ms linear;
    transition: all 1000ms linear;
}

然后使用javascript等

let px = 295 // increments through other things
document.getElementsByTagName('ul')[0].style.marginLeft = `-${px}px`;

然后，ul回到margin-left:0，但我希望它以负边距动画，然后紧贴margin-left:0

编辑：

第一个答案听起来好像不清楚。我想单击一个元素并使它具有一种动画效果，然后捕捉回到默认位置。常见的过渡会同时为两种方式制作动画

Answer 1

尝试使用动画类，并使用jQuery管理这些类

看看我的例子

$('button').click(function() {
  $('ul').toggleClass('animated');
});

ul {
  margin-left: 200px;
  -webkit-transition: margin 1000ms linear;
  transition: margin 1000ms linear;
}

ul.animated {
  margin-left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li>test</li>
</ul>

<button>Animate</button>

如何仅设置负边距动画

1 个答案: