Apologies if the title is unclear.
In my design, I aim to implement a transition effect when the left or right buttons are clicked. However, the transition does not function as expected because the OnSuccess callback seems to occur before the page is rendered. Therefore, the transition effect is not visible. I have been unable to find a solution to this issue.
<script>
function show() {
document.getElementsByClassName("comment-item-panel")[0].style.right = 0;
}
</script>
@using (Ajax.BeginForm("Comments", null,
new AjaxOptions() { UpdateTargetId = "comm", OnSuccess = "show()" },
new { @class = "comments" }))
{
<button type="submit" name="page" class="vertical-button vertical-button-right" value=@(Model.PagingInfo.CurrentPage+1)>‹</button>
<div class="comment-item-panel">
@foreach (var comment in Model.Comments)
{
<div class="comment-item">
<h5>@comment.Commentator.UserName</h5>
<p>@comment.Text</p>
</div>
}
</div>
<button type="submit" name="page" class="vertical-button vertical-button-left" value=@(Model.PagingInfo.CurrentPage-1)>›</button>
}
.comment-item-panel {
right: 999em;
transition: right 1s;
}