我正在尝试进行Ajax调用时保留页面的当前高度。在显示新内容之前，几乎所有内容都被隐藏了，因此浏览器滚动到页面顶部，因为在转换过程中下面没有内容。
linksPages.on('click',function(e){
e.preventDefault();
jQuery.post(MyAjax.url, {action : 'ajax' ,href : $(this).attr('href') }, function(response) {
$('#content').fadeOut();
setTimeout(function() {
$('#content').html(response).fadeIn();
}, 500);
});
});
我考虑过添加类似的类：
linksPages.on('click',function(e){
e.preventDefault();
jQuery.post(MyAjax.url, {action : 'ajax' ,href : $(this).attr('href') }, function(response) {
//$('#content').fadeOut();
$('#content').addClass('cortinaIn');
setTimeout(function() {
$('#content').html(response).fadeIn();
$('#content').removeClass('cortinaIn');
$('#content').addClass('cortinaOut');
}, 500);
$('#content').removeClass('cortinaOut');
});
});
并定义cortinaIn和cortinaOutCSS规则：
.cortinaIn {
transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
transition-duration: 0.3s;
transition-timing-function: ease-out;
transition-delay: 0.1s;
-moz-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-moz-transition-duration: 0.3s;
-moz-transition-timing-function: ease-out;
-moz-transition-delay: 0.1s;
-webkit-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: 0.1s;
-o-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-o-transition-duration: 0.3s;
-o-transition-timing-function: ease-out;
-o-transition-delay: 0.1s;
transform:scale(0, 1);
transform-origin: center center;
-ms-transform:scale(0, 1); /* IE 9 */
-ms-transform-origin: center center;
-webkit-transform:scale(0, 1); /* Safari and Chrome */
-webkit-transform-origin: center center;
-o-transform:scale(0, 1); /* Opera */
-o-transform-origin: center center;
}
.cortinaOut {
transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
transition-duration: 0.3s;
transition-timing-function: ease-out;
transition-delay: 0.1s;
-moz-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-moz-transition-duration: 0.3s;
-moz-transition-timing-function: ease-out;
-moz-transition-delay: 0.1s;
-webkit-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: 0.1s;
-o-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
-o-transition-duration: 0.3s;
-o-transition-timing-function: ease-out;
-o-transition-delay: 0.1s;
transform:scale(1, 1);
transform-origin: center center;
-ms-transform:scale(1, 1); /* IE 9 */
-ms-transform-origin: center center;
-webkit-transform:scale(1, 1); /* Safari and Chrome */
-webkit-transform-origin: center center;
-o-transform:scale(1, 1); /* Opera */
-o-transform-origin: center center;
}
效果很好，但是我无法通过CSS转换找到“淡入”和“朝外”效果。任何想法来实现这种行为？
它比您制作的要简单得多。
linksPages.on('click',function(e){
e.preventDefault();
jQuery.post(MyAjax.url, {action : 'ajax' ,href : $(this).attr('href') }, function(response) {
$('#content').addClass('cortinaOut');
setTimeout(function() {
$('#content').removeClass('cortinaOut');
}, 500);
});
});
然后在您的CSS中，执行以下操作：
#content {
transition: opacity 0.3s ease-out;
opacity: 1;
}
.cortinaOut {
transition: opacity 0.3s ease-out;
opacity: 0;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句