2016-06-16 4 views
0

Извините, если Название немного расплывчато.Ajax.BeginForm OnSuccess не делает работу по tranisition CSS

Это мой взгляд, в котором я хочу создать переход при нажатии левой или правой кнопок. Однако переход не работает, поскольку, насколько я понял, обратный вызов 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" [email protected](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" [email protected](Model.PagingInfo.CurrentPage-1)>&rsaquo;</button> 

     } 


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


} 
+0

Является ли JQuery вариант? – smoksnes

+0

@smoksnes Я предпочитаю простой javascript, но я думаю, что контекст тот же. так что это может быть полезно –

ответ

0

Вот еще из работы- вокруг, возможно, поможет вам на вашем пути.

Если show() срабатывает перед содержимым визуализируется вы можете слушать РОМ манипуляции.

коснуться, как это:

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; 
    }); 

} 

Отрывок ниже более корректуры из-концепции дом-манипуляционной части.

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

Смежные вопросы