css - 转换 css 在 ajax 调用时丢失

Question

我在 div 上有以下 css:

.action-dialog.is-active {
transform: translateX(0);
transition: 0.4s all ease-in-out; }

但是在 ajax 调用时，css 转换丢失了，即我的弹出窗口没有显示滑动效果。 请帮忙？

ajax调用:

$("body").on("click", ".displayToDoDetails", function (e) {
$(e.currentTarget).addClass("is-active");
var notId = $(this).find(".toDoId").val();
$.ajax({
    url: '/Home/DisplayToDoDetails/?qid=' + $('body').data('usid') + "&notId=" + notId,
    type: "POST",
    async: true,
    success: function (data) {
        $("#toDoDetails").html(data);
        componentHandler.upgradeDom();
        return true;
    },
    error: function (xhr) {
        alert("An error occurred while displayind to do details");
        return false;
    }
});

});

HTML代码:

<div class="action-dialog action-dialog--position-top action-dialog--fixed-width-lg js-action-dialog action-list__menu is-active">
<div class="mdl-card custom-card mdl-shadow--2dp">
    <div class="close js-action-dialog__close">
        <i class="material-icons">close</i>
    </div>
    <div class="mdl-card__supporting-text p-30">
        <h2 class="form__section-title--icon mb-20 text-transform-none font-r-bold font-size-lg--24">
            <i class="@Model.Icon mr-10"></i> @Model.Label
        </h2>

        <a href="@Model.URL" title="@Model.Label">View @Model.Label.ToLower()</a>

    </div>
</div>

Answer 1

您似乎没有正确设置转换。转换通常安排在基本状态中，并在发生变化时触发(例如类的添加或减去)。例如:

const button = document.querySelector("button");
const actionDialog = document.querySelector(".action-dialog");

function handleClick() {
  actionDialog.classList.toggle("is-active");
  actionDialog.querySelector("em").innerHTML = actionDialog.classList.contains("is-active") ? "active" : "inactive";
}

button.addEventListener("click", handleClick);

.box {
  background-color: red;
  width: 100px;
  height: 100px;
  margin-bottom: 2em;
  position: relative;
}

.box span {
  position: absolute;
  bottom: -1.5em;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Once the 'is-active' class is removed, transition back 
   to the starting position */
.action-dialog {
  transform: translateX(0);
  /* Here we define what will happen when a change occurs */
  transition: 0.4s all ease-in-out;
}

/* Occurs only when the class is added */
.action-dialog.is-active {
  transform: translateX(300px);
}

<div class="box action-dialog">
  <span>State: <em>inactive</em></span>
</div>

<button>Toggle action</button>

编辑 在您的评论中，您问:

Is there a way to set the transition when the pop up is displayed?

我会创建一个动画并立即应用它。动画立即发生，无需添加或删除类。

例如:

.action-dialog {
  width: 50px;
  height: 50px;
  background-color: red;
  animation: 1s move-dialog forwards;
}

@keyframes move-dialog {
  from {
    transform: translateX(0);
  }
  
  to {
  transform: translateX(200px);
}

<div class="action-dialog"></div>