Question

我有以下信息，单击显示弹出窗口，该弹出窗口从右侧滑动：

<li class="history-list__item history-list__item--clickable action-list-button has-dialog" id="quotes">

弹出窗口：

<div class="action-dialog action-dialog--position-top action-dialog--fixed-width-lg js-action-dialog action-list__menu" for="quotes">
 <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">
            Quoting
        </h2>

    </div>
</div>

JS：

(function ($) {
 if ($('.js-action-list--docked').find('.action-list-button').length > 0) {
    $('.js-action-list--docked').find('.action-list-button').each(function () {
        $(this).on('click', function () {

        if (!$(this).hasClass('is-active')) {
          // Remove class on any active  action-list button
          $('.action-list-button').removeClass('is-active');
          $('.js-action-dialog').removeClass('is-active');

          $(this).addClass('is-active');
          if ($(this).hasClass('has-dialog')) {
            var id = $(this).attr('id');
            $('.js-action-dialog[for="' + id + '"]').addClass('is-active');
          }
        }
        else {
          $(this).removeClass('is-active');
          $('.js-action-dialog').removeClass('is-active');
        }
      });
    });

    //close all action dialog if
    $("body").on("click", ".js-action-dialog__close", function (e) {
      $('.action-list-button').removeClass('is-active');
      $('.js-action-dialog').removeClass('is-active');
    });
  }

})(jQuery);

CSS：

.action-dialog {
  position: absolute;
  right: 0;
  z-index: 99;
  transform: translateX(110%);
  transition: 0.4s all ease-in-out; }
  .action-dialog.is-active {
    transform: translateX(0);
    transition: 0.4s all ease-in-out; }
  .action-dialog .close {
    position: absolute;
    top: 25px;
    right: 25px;
    cursor: pointer; }
  .action-dialog--position-top {
    top: 0; }
  .action-dialog--fixed-width {
    width: 690px; }
    .action-dialog--fixed-width-lg {
      width: 955px; }
  .action-dialog h2 {
    color: #5b5e62; }

但是我更改了此显示弹出窗口部分，以显示来自ajax调用的弹出窗口。我已经在li上添加了一个新类，它在点击后会触发ajax调用：

<li class="history-list__item history-list__item--clickable action-list-button has-dialog displayToDoDetails">

ajax调用如下：

$("body").on("click", ".displayToDoDetails", function (e) {
$(e.currentTarget).addClass("is-active");
var notId = $(this).find(".toDoId").val();
$.ajax({
    url: '/Home/DisplayDetails/?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;
    }
});
});

视图在下面，我已将is-active添加到第一分区：

<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="icon-proposal mr-10"></i> Quotes to follow-up
        </h2>

    </div>
</div>

弹出窗口在屏幕的右上方显示得很好，但是没有滑动效果。在两种情况下，我已经比较了呈现的HTML，它们是相同的。在开发人员工具中分析元素（弹出窗口的第一个div）后，我可以看到它具有滑动样式。关于如何解决这个问题的任何想法？

弹出对ajax调用没有滑动效果

0 个答案: