Мое приложение плохо работает с jQuery slideDown и slideUp. Я ищу использовать эквивалент CSS3 в браузерах, которые его поддерживают.
Возможно ли, используя переходы CSS3, изменить элемент от display: none; до display: block; при перемещении элемента вниз или вверх?
Вы можете сделать что-то вроде этого:
#youritem .fade.in {
animation-name: fadeIn;
}
#youritem .fade.out {
animation-name: fadeOut;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(startYposition);
}
100% {
opacity: 1;
transform: translateY(endYposition);
}
}
@keyframes fadeOut {
0% {
opacity: 1;
transform: translateY(startYposition);
}
100% {
opacity: 0;
transform: translateY(endYposition);
}
}
Пример - Слайд и Fade:
Этот слайд и анимирует непрозрачность - не на основе высоты контейнера, а сверху/координаты. Показать пример
Пример - Auto-height/No Javascript: Вот живой образец, не требующий высоты - работа с автоматической высотой и без javascript.
Показать пример
Я изменил ваше решение, чтобы он работал во всех современных браузерах:
фрагмент css:
-webkit-transition: height 1s ease-in-out;
-moz-transition: height 1s ease-in-out;
-ms-transition: height 1s ease-in-out;
-o-transition: height 1s ease-in-out;
transition: height 1s ease-in-out;
js snippet:
var clone = $('#this').clone()
.css({'position':'absolute','visibility':'hidden','height':'auto'})
.addClass('slideClone')
.appendTo('body');
var newHeight = $(".slideClone").height();
$(".slideClone").remove();
$('#this').css('height',newHeight + 'px');
здесь полный пример http://jsfiddle.net/RHPQd/
Итак, я пошел дальше и ответил на свой вопрос :)
Ответ @True рассматривал преобразование элемента на определенную высоту. Проблема в том, что я не знаю высоту элемента (он может колебаться).
Я нашел другие решения, которые использовали max-height в качестве перехода, но это дало мне очень резкую анимацию.
Мое решение ниже работает только в браузерах WebKit.
Хотя это и не просто CSS, он включает в себя переход высоты, которая определяется некоторыми JS.
$('#click-me').click(function() {
var height = $("#this").height();
if (height > 0) {
$('#this').css('height', '0');
} else {
$("#this").css({
'position': 'absolute',
'visibility': 'hidden',
'height': 'auto'
});
var newHeight = $("#this").height();
$("#this").css({
'position': 'static',
'visibility': 'visible',
'height': '0'
});
$('#this').css('height', newHeight + 'px');
}
});#this {
width: 500px;
height: 0;
max-height: 9999px;
overflow: hidden;
background: #BBBBBB;
-webkit-transition: height 1s ease-in-out;
}
#click-me {
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<p id="click-me">click me</p>
<div id="this">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div>
<div>always shows</div>почему бы не воспользоваться преимуществами современных браузеров css перехода и сделать вещи проще и быстрее, используя больше css и меньше jquery
Вот код для перемещения вверх и вниз
Вот код для раздвижения влево и вправо
Аналогичным образом мы можем изменить скольжение сверху вниз или справа налево, изменив значение origin и transform: scaleX (0) или transform: scaleY (0) соответственно.
Я бы рекомендовал использовать jQuery Transit Plugin, который использует свойство преобразования CSS3, которое отлично работает на мобильных устройствах из-за того, что большинство вспомогательных аппаратных ускорений внешний вид и внешний вид.
HTML:
<div class="moveMe">
<button class="moveUp">Move Me Up</button>
<button class="moveDown">Move Me Down</button>
<button class="setUp">Set Me Up</button>
<button class="setDown">Set Me Down</button>
</div>
JavaScript:
$(".moveUp").on("click", function() {
$(".moveMe").transition({ y: '-=5' });
});
$(".moveDown").on("click", function() {
$(".moveMe").transition({ y: '+=5' });
});
$(".setUp").on("click", function() {
$(".moveMe").transition({ y: '0px' });
});
$(".setDown").on("click", function() {
$(".moveMe").transition({ y: '200px' });
});
Получение переходов на высоту для работы может быть немного сложнее, потому что вам нужно знать высоту для анимации. Это дополнительно осложняется добавлением в анимированный элемент.
Вот что я придумал:
используйте такой стиль:
.slideup, .slidedown {
max-height: 0;
overflow-y: hidden;
-webkit-transition: max-height 0.8s ease-in-out;
-moz-transition: max-height 0.8s ease-in-out;
-o-transition: max-height 0.8s ease-in-out;
transition: max-height 0.8s ease-in-out;
}
.slidedown {
max-height: 60px ; // fixed width
}
Оберните свой контент в другой контейнер, чтобы скользящий контейнер не имел полей/полей/границ:
<div id="Slider" class="slideup">
<!-- content has to be wrapped so that the padding and
margins don't effect the transition height -->
<div id="Actual">
Hello World Text
</div>
</div>
Затем используйте несколько script (или декларативную разметку в инфраструктуре привязки) для запуска классов CSS.
$("#Trigger").click(function () {
$("#Slider").toggleClass("slidedown slideup");
});
Пример здесь: http://plnkr.co/edit/uhChl94nLhrWCYVhRBUF?p=preview
Это отлично подходит для контента с фиксированным размером. Для более общего разрешения вы можете использовать код для определения размера элемента при активации перехода. Ниже приведен плагин jQuery, который делает именно это:
$.fn.slideUpTransition = function() {
return this.each(function() {
var $el = $(this);
$el.css("max-height", "0");
$el.addClass("height-transition-hidden");
});
};
$.fn.slideDownTransition = function() {
return this.each(function() {
var $el = $(this);
$el.removeClass("height-transition-hidden");
// temporarily make visible to get the size
$el.css("max-height", "none");
var height = $el.outerHeight();
// reset to 0 then animate with small delay
$el.css("max-height", "0");
setTimeout(function() {
$el.css({
"max-height": height
});
}, 1);
});
};
который может быть вызван следующим образом:
$( "# Триггер" ). click (function() {
if ($("#SlideWrapper").hasClass("height-transition-hidden"))
$("#SlideWrapper").slideDownTransition();
else
$("#SlideWrapper").slideUpTransition();
});
против разметки следующим образом:
<style>
#Actual {
background: silver;
color: White;
padding: 20px;
}
.height-transition {
-webkit-transition: max-height 0.5s ease-in-out;
-moz-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
overflow-y: hidden;
}
.height-transition-hidden {
max-height: 0;
}
</style>
<div id="SlideWrapper" class="height-transition height-transition-hidden">
<!-- content has to be wrapped so that the padding and
margins don't effect the transition height -->
<div id="Actual">
Your actual content to slide down goes here.
</div>
</div>
Пример: http://plnkr.co/edit/Wpcgjs3FS4ryrhQUAOcU?p=preview
Я написал это недавно в блоге, если вас интересует более подробная информация:
http://weblog.west-wind.com/posts/2014/Feb/22/Using-CSS-Transitions-to-SlideUp-and-SlideDown
Aight fam, после некоторых исследований и экспериментов, я считаю, что лучший подход заключается в том, чтобы высота предмета была 0px и позволила ему перейти на точную высоту. Вы получаете точную высоту с помощью JavaScript. JavaScript не выполняет анимацию, а просто меняет значение высоты. Проверьте это:
function setInfoHeight() {
$(window).on('load resize', function() {
$('.info').each(function () {
var current = $(this);
var closed = $(this).height() == 0;
current.show().height('auto').attr('h', current.height() );
current.height(closed ? '0' : current.height());
});
});
Всякий раз, когда страница загружается или изменяется, элемент с классом info будет обновлен атрибут h. Затем вы можете нажать кнопку style="height: __", чтобы установить ее на ранее установленное значение h.
function moreInformation() {
$('.icon-container').click(function() {
var info = $(this).closest('.dish-header').next('.info'); // Just the one info
var icon = $(this).children('.info-btn'); // Select the logo
// Stop any ongoing animation loops. Without this, you could click button 10
// times real fast, and watch an animation of the info showing and closing
// for a few seconds after
icon.stop();
info.stop();
// Flip icon and hide/show info
icon.toggleClass('flip');
// Metnod 1, animation handled by JS
// info.slideToggle('slow');
// Method 2, animation handled by CSS, use with setInfoheight function
info.toggleClass('active').height(icon.is('.flip') ? info.attr('h') : '0');
});
};
Здесь стиль для класса info.
.info {
display: inline-block;
height: 0px;
line-height: 1.5em;
overflow: hidden;
padding: 0 1em;
transition: height 0.6s, padding 0.6s;
&.active {
border-bottom: $thin-line;
padding: 1em;
}
}
Я использовал это в одном из моих проектов, поэтому имена классов специфичны. Вы можете изменить их, как хотите.
Стиль может не поддерживаться кросс-браузером. Прекрасно работает в хроме.
Ниже приведен живой пример этого кода. Просто нажмите значок ?, чтобы начать анимацию
вы не можете сделать easisly слайд-шоу slidedown с css3 tha, почему я превратил JensT script в плагин с резервным копированием javascript и обратным вызовом.
таким образом, если у вас есть современный brwowser, вы можете использовать css3 csstransition. если ваш браузер не поддерживает его, воспользуйтесь старинным слайд-шоу SlideUp.
/* css */
.csstransitions .mosneslide {
-webkit-transition: height .4s ease-in-out;
-moz-transition: height .4s ease-in-out;
-ms-transition: height .4s ease-in-out;
-o-transition: height .4s ease-in-out;
transition: height .4s ease-in-out;
max-height: 9999px;
overflow: hidden;
height: 0;
}
плагин
(function ($) {
$.fn.mosne_slide = function (
options) {
// set default option values
defaults = {
delay: 750,
before: function () {}, // before callback
after: function () {} // after callback;
}
// Extend default settings
var settings = $.extend({},
defaults, options);
return this.each(function () {
var $this = $(this);
//on after
settings.before.apply(
$this);
var height = $this.height();
var width = $this.width();
if (Modernizr.csstransitions) {
// modern browsers
if (height > 0) {
$this.css(
'height',
'0')
.addClass(
"mosne_hidden"
);
} else {
var clone =
$this.clone()
.css({
'position': 'absolute',
'visibility': 'hidden',
'height': 'auto',
'width': width
})
.addClass(
'mosne_slideClone'
)
.appendTo(
'body'
);
var newHeight =
$(
".mosne_slideClone"
)
.height();
$(
".mosne_slideClone"
)
.remove();
$this.css(
'height',
newHeight +
'px')
.removeClass(
"mosne_hidden"
);
}
} else {
//fallback
if ($this.is(
":visible"
)) {
$this.slideUp()
.addClass(
"mosne_hidden"
);
} else {
$this.hide()
.slideDown()
.removeClass(
"mosne_hidden"
);
}
}
//on after
setTimeout(function () {
settings.after
.apply(
$this
);
}, settings.delay);
});
}
})(jQuery);;
как использовать его
/* jQuery */
$(".mosneslide").mosne_slide({
delay:400,
before:function(){console.log("start");},
after:function(){console.log("done");}
});
вы можете найти демо-страницу здесь http://www.mosne.it/playground/mosne_slide_up_down/