Question

很抱歉，如果标题有点模糊。

这是我想要在点击左或右按钮时创建转换的视图。但是，转换不起作用，因为据我所知，OnSuccess回调在呈现页面之前发生。所以我看不到过渡效果。我无法找到解决方法：（

      <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)>&lsaquo;</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)>&rsaquo;</button>

        }


        .comment-item-panel {
            right: 999em;
            transition: right 1s;


 }

Answer 1

Ajax.BeginForm OnSuccess不会让CSS tranisition工作 - 试试这个

http://csharp-video-tutorials.blogspot.in/2013/09/part-95-onbegin-oncomplete-onsuccess.html

Answer 2

这里有更多的解决办法，可能会帮助你。

如果在呈现内容之前触发show()，您可以收听dom操作。

像这样：

function show() {
   // Listen to dom manipulation, and trigger when items added.
    $("form").one("DOMSubtreeModified", function() {
        alert("tree changed");
        document.getElementsByClassName("comment-item-panel")[0].style.right = 0;
    });

}

下面的代码段更像是dom操作部分的概念验证。

// Only occur once, since it's rebound every post.
$("#comments").one("DOMSubtreeModified", function() {
    alert("tree changed");
});

$('button').click(function(){
 $("#comments").append('<p>new element added!</p>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="comments">
  
</div>
<button>Add Element</button>

Ajax.BeginForm OnSuccess并没有使CSS tranisition工作

2 个答案: