我在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') + "¬Id=" + 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>
答案 0 :(得分:0)
您似乎没有正确设置转换。过渡通常以基本状态进行安排,并在发生某些更改(例如,类的添加或减少)后触发。例如:
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>