Переход css теряется при вызове ajax

Question

У меня есть следующее css на div:

.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>

Редактировать В своем комментарии вы спросили:

Есть ли способ установитьпереход, когда отображается всплывающее окно?

Я бы создал анимацию и сразу применил бы ее.Анимация происходит сразу, без необходимости добавления или удаления класса.

Например:

.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>