검도 그리드를 사용하고 있습니다. 슬라이드 다운 애니메이션을 추가하고 싶습니다. 그리드에서 행을 클릭하면 애니메이션으로 확장됩니다. (확장은 grid.ExpandRow 함수 - 검도 내부에서 발생합니다).검도 그리드 - 행 확장 애니메이션
k-detail-row 요소에 애니메이션이 필요하다고 생각합니다. 하지만 여전히 그럴 수있는 적절한 장소/방법을 찾을 수 없습니다.
누구나 이미 그렇게했으며 나를 도와 줄 수 있습니다.
불행히도 테이블 행에는 애니메이션이 지원되지 않습니다. 여기에 관련된 질문이 있습니다 : How to Use slideDown (or show) function on a table row?
나는 동일한 질문을 가지고 있었지만, 이것은 오래된 게시물이지만, 나는 누군가가 그것을 필요로 할지도 모른다고 생각했습니다.
불행히도 Kendo는 아직이 기능을 지원하지 않지만 해결책이 있습니다.
Kendo는 jquery toggle()을 사용하여 세부 행을 표시하거나 숨김으로써 jQuery에서 조건부 재 지정을 수행하여 애니메이션을 삽입 할 수 있습니다.
jQuery(function($) {
var _oldShow = $.fn.show;
var _oldHide = $.fn.hide;
$.fn.show = function(speed, oldCallback) {
return $(this).each(function(index, item) {
var obj = $(item);
_oldShow.apply(obj, [speed, oldCallback]);
if (obj.hasClass("k-detail-row")) {
obj.find(".k-grid.k-widget").each(function() {
var grid = $(this);
grid.slideDown(300);
});
}
});
}
$.fn.hide = function (speed, oldCallback) {
return $(this).each(function() {
var obj = $(this);
if (obj.hasClass("k-detail-row")) {
obj.find(".k-grid.k-widget").each(function() {
$(this).slideUp(300, function() { _oldHide.apply(obj, [speed, oldCallback]); });
});
} else {
_oldHide.apply(obj, [speed, oldCallback]);
}
});
}
});
오늘이 문제가 발생하여 grid의 detailExpand 기능을 사용하여 문제를 해결했습니다. 그런 다음 Kendo Fx 슬라이드 다운 효과를 사용하여 세부 행을 아래로 내립니다. 예를 들어 : 자세한 내용은
detailExpand: function (e) {
var detailRow = e.detailRow;
setTimeout(function() {
kendo.fx(detailRow).slideIn("down").duration(375).play();
}, 0);
}
확인하십시오