时间戳

首页 > 解决方案 > 如何使用动画将 HTML 元素移动到另一个元素的上方或下方

javascript - 如何使用动画将 HTML 元素移动到另一个元素的上方或下方

问题描述

我知道我可以使用相当简单的 JS 函数将一个元素移动到另一个元素的上方或下方。但我想让那个动作动画化。有没有一种简单的方法可以用 vanilla JS 或 jQuery 或 CSS 做到这一点？

事实上，动作是瞬间的，不是很明显，有点刺耳。

考虑下面的代码（或这里的演示小提琴）。其中大部分是从 MVC 和 razor 生成的。但我不想分散实际问题的注意力，所以我已经剥离了所有这些，直到一天结束时呈现的内容作为一个工作示例。（抱歉，没有其余的 CSS 和其他东西，它有点难看！）

代码

function moveUp(rowId) {

  var rowSelector = "#" + rowId;

  var myRow = $(rowSelector).closest(".item-row");
  var prev = myRow.prev(".item-row");

  if (myRow.attr("id") != $(".item-row:first").attr("id")) {
    myRow.remove();
    myRow.insertBefore(prev);
  }
}

function moveDown(rowId) {

  var rowSelector = "#" + rowId;

  var myRow = $(rowSelector).closest(".item-row");
  var next = myRow.next(".item-row");

  if (myRow.attr("id") != $(".item-row:last").attr("id")) {
    myRow.remove();
    myRow.insertAfter(next);
  }
}
.item-row {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-bottom: 1rem;
  word-wrap: break-word;
  border-radius: 0;
  box-shadow: none;
  padding: 1rem 0 1rem 1rem;
  border: 2px solid #d3d3d3;
  border-left: 6px solid #006400;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <div id="item-panel">
    <div>
      <p>
        Items
      </p>
    </div>

    <div class="item-row" id="one">
      <div class="row">

        <div class="col-md-2">
          <div onclick="moveUp('one')" title="move up" class="move-up btn">
            <i class="fas fa-sort-up"></i>
          </div>
          <div onclick="moveDown('one')" title="move down" class="move-down btn">
            <i class="fas fa-sort-down"></i>
          </div>
        </div>

        <div class="col-md-8">
          <p>
            One! Some data and other things
          </p>
        </div>

      </div>
    </div>

    <div class="item-row" id="two">
      <div class="row">

        <div class="col-md-2">
          <div onclick="moveUp('two')" title="move up" class="move-up">
            <i class="fas fa-sort-up"></i>
          </div>
          <div onclick="moveDown('two')" title="move down" class="move-down">
            <i class="fas fa-sort-down"></i>
          </div>
        </div>

        <div class="col-md-8">
          <p>
            Two! more data.
          </p>
        </div>

      </div>
    </div>

    <div class="item-row" id="three">
      <div class="row">

        <div class="col-md-2">
          <div onclick="moveUp('three')" title="move up" class="move-up">
            <i class="fas fa-sort-up"></i>
          </div>
          <div onclick="moveDown('three')" title="move down" class="move-down">
            <i class="fas fa-sort-down"></i>
          </div>
        </div>

        <div class="col-md-8">
          <p>
            Three! And still some more things.
          </p>
        </div>

      </div>
    </div>

  </div>

</body>

</html>

标签： javascripthtmljquerycss

解决方案

如果你添加一些这样的 CSS

.item-row {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-bottom: 1rem;
  word-wrap: break-word;
  border-radius: 0;
  box-shadow: none;
  padding: 1rem 0 1rem 1rem;
  border: 2px solid #d3d3d3;
  border-left: 6px solid #006400;
  opacity: 0;
  animation: fadeIn 300ms 1 ease-in;
  animation-fill-mode: forwards;
}

.loading {
  display: none;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

您可以强制 html 重新渲染元素，强制它进行动画处理。

function onMove($element) {
  $element[0].classList.add("loading");
  setTimeout($element[0].classList.remove("loading"), 100);
}

function moveUp(rowId) {

  var rowSelector = "#" + rowId;
  
  var myRow = $(rowSelector).closest(".item-row");
  onMove(myRow);
  var prev = myRow.prev(".item-row");

  if (myRow.attr("id") != $(".item-row:first").attr("id")) {
    myRow.remove();
    myRow.insertBefore(prev);
  }
}

function moveDown(rowId) {

  var rowSelector = "#" + rowId;
  
  var myRow = $(rowSelector).closest(".item-row");
  onMove(myRow);
  var next = myRow.next(".item-row");

  if (myRow.attr("id") != $(".item-row:last").attr("id")) {
    myRow.remove();
    myRow.insertAfter(next);
  }
}

注意：这是来自您的小提琴。

推荐阅读