Question

在单击事件之后，我试图将其他元素从列表中删除后，使其平滑移动。不幸的是，即使我移除特定元素的过渡很顺利，并且为其他所有问题设置了规则，也没有发生。

之所以不会发生，是因为立即重新计算了高度，并且重绘不是transform，而是重绘，因此没有任何平滑的东西。

签出：

function whichAnimationEvent() {
  var t,
    el = document.createElement("fakeelement");

  var animations = {
    "animation": "animationend",
    "OAnimation": "oAnimationEnd",
    "MozAnimation": "animationend",
    "WebkitAnimation": "webkitAnimationEnd"
  }

  for (t in animations) {
    if (el.style[t] !== undefined) {
      return animations[t];
    }
  }
}

function appendMessageToContainer(container, message) {
  var messages_container = jQuery(container);

  let test_block = '<div class="unique-message normal-message col-md-12 row" data-unqiue-id="3456a" data-message-type="normal"><p class="col-md-10">A new update has been released, go check it out!</p><a href="#" class="message-remove col-md-2">X</a></div>';
  messages_container.append(test_block);

  jQuery('#add-button').on('click', function(event) {
    event.preventDefault();
    messages_container.append(test_block);
  });

  jQuery('.message-remove').on('click', function(event) {
    event.preventDefault();

    let closest_parent = jQuery(event.currentTarget).closest('.unique-message');
    closest_parent.addClass('hide-unique-message');

    jQuery(closest_parent).one(whichAnimationEvent(), function(transition_event) {
      closest_parent.remove();
    });
  });
}

appendMessageToContainer('#messages-container');

body {
  padding: 16px;
}

#messages-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #eae9e8;
  padding: 10px;
  width: 420px;
  max-height: 200px;
  overflow-y: scroll;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Segoe UI';
}

@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }
  33% {
    opacity: 1;
    transform: translate3d(0, 0px, 0);
  }
  66% {
    opacity: 1;
    transform: translate3d(0, -4px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.unique-message {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 48px;
  background-color: white;
  margin: 0 0 10px 0;
  padding: 14px !important;
  animation: slide-up 1s ease;
  max-height: 48px;
}

@keyframes hide-unique-message {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    visibility: visible;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 5px, 0) scale(0.95);
    visibility: hidden;
  }
}

.hide-unique-message {
  animation: hide-unique-message 0.25s ease-out;
  opacity: 0;
  visibility: hidden;
}

.unique-message:first-of-type {
  margin: 10px 0;
}

.unique-message p {
  display: flex;
  flex-direction: row;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 500;
  font-size: 14px;
}

.unique-message a {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <div id="messages-container">
  </div>
  <button id="add-button">Add more</button>
</body>

</html>

点击“添加更多”来创建2个新项目，然后删除第一个。我希望其他两个都能顺利上升。

我了解为父窗口等重新计算高度的含义，但是没有图书馆帮助我吗？

在列表中的元素被删除后，如何平稳地重新放置它们？

0 个答案: