css animation height
Есть блок, который я хочу анимировать с помощью css
#confirm {
position: absolute;
width: 280px;
height: 0;
border: 1px grey solid;
background-color: #f9f0ff;
z-index: 1000;
display: inline-block;
border-radius: 6px;
transition: height 7s;
overflow: hidden;
padding: -1px;
text-indent: 0;
box-sizing: border-box;
#confirm.f-dropped {
height: 160px;
}
#confirm .content {
margin: 1em;
display: inline-block;
overflow: hidden;
}
}
По некоторому событию я средствами JS добавляю .f-dropped Но анимация получается некрасивой... Вначале, когда высота блока небольшая, его содержимое сильно сдвинуто вверх... И потом опускается вниз. Я считаю, что красивее будет, когда содержимое блока не будет двигаться при анимации, а будет изменяться только его размер. Вот пример. http://jsbin.com/ricuco |
Цитата:
А манипулируя высотой материнского элемента содержимое будет скрываться или показываться... |
А можно пример... А то я уже столько перепробовал. И top и разнообразные position...
И все равно получается, что содержимое вначале сильно поднято вверх, и только при достаточном размере родительского контейнера опускается вниз. И никакие top: 10px не помогли.. |
Цитата:
|
http://jsbin.com/ricuco В первой ссылке... Не работает...
http://jsbin.com/zihimo То же самое (только сам раскрывающийся элемент) но работает... Вот в чём между ними различие |
Пример кагбэ должен быть выложен тут... Зачем кому-то чужой сайт...
|
А что пример занимает достаточно много, ничего?
|
Цитата:
|
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
#confirm {
position: absolute;
width: 280px;
height: 0;
border: 1px #230D33 solid;
z-index: 1000;
display: inline-block;
border-radius: 6px;
transition: height 7s;
overflow: hidden;
text-indent: 0;
box-sizing: border-box;
background: linear-gradient(#F9F0FF 70%, #EAC9FF);
box-shadow: 0 0 16px rgba(0,0,0,0.5)
}
#confirm.f-dropped {
height: 160px;
}
#confirm .content {
width:100%;
box-sizing: border-box;
font-size: 0.em;
}
</style>
</head>
<body>
<div style="margin-left: 100px;">
<p><a data-confirm href="aaa">confirm</a>
</p>
<p><a data-confirm href="aaa">confirm</a>
</p>
<p><a data-confirm href="aaa">confirm</a>
</p>
<p><a data-confirm href="aaa">confirm</a>
</p>
<p><a data-confirm href="aaa">confirm</a>
</p>
</div>
<script id="jsbin-javascript">
(function($, window) {
window.Confirm = {
name: 'confirm',
version: '{{version}}',
init: function(scope) {
var self;
self = this;
this.scope = scope;
if ($('body').has('#confirm').length === 0) {
this.confirm = $('<span id="confirm"><span class="content">Вы уверенны в этом??? <a href="#">Удалить</a> <a href="#" role="cancel">Отменить</a> </span></span>').appendTo('body').hide();
}
$(this.scope).off('.confirm').on('click.confirm', '[data-confirm]', function(e) {
self.toggle(e.target);
e.preventDefault();
});
$('body').off('.confirm').on('click.confirm', function(e) {
if ($(e.target).is('[data-confirm]')) {
return;
}
return self.hide();
}).on('keypress.confirm', function(e) {
if (e.keyCode === 27) {
return self.hide();
}
});
$(this.confirm).off('.confirm').on('click.confirm', function(e) {
return e.stopPropagation();
});
},
show: function(el) {
var self;
self = this;
$(this.confirm).show();
return $(this.scope).on('click.confirm', function(e) {
if (!$(e.target).is('#confirm')) {
$(self.scope).off('.dialog');
self.hide();
return e.preventDefault();
}
});
},
hide: function() {
var self;
self = this;
setTimeout(function() {
if (!$(self.confirm).hasClass('f-dropped')) {
$(self.confirm).hide();
}
}, 7000);
return $(this.confirm).removeClass('f-dropped');
},
toggle: function(el) {
var cent, left;
cent = (parseInt($(this.confirm).css('width')) - $(el).width()) / 2;
left = ($(el).offset().left) - cent;
$(this.confirm).removeClass('f-dropped').insertAfter(el).show().css('left', left).addClass('f-dropped');
$('#confirm a[role="cancel"]').focus();
return $('#confirm .content').css('padding', '1em').css('display', 'inline-block');
}
};
})(Zepto, window);
Confirm.init(document);
</script>
</body>
</html>
Вот так кратко... Удалось установить проблему. Если нет
$('#confirm a[role="cancel"]').focus();
Все работает нормально... |
Цитата:
Я примерчик твой запустил... Там вроде не сминается ничего.... |
Вложений: 1
А какой браузер? У меня фаерфокс.В процессе открытия блок выглядит так. Т.е Содержимое сильно прижато к верхнему краю. Если НЕ ставить фокус на ссылку, то все проходит гладко.
|
Цитата:
Цитата:
|
А как добиться, чтобы не прыгала? У меня идеи кончились...
Хотя если не ставить фокус у меня ничего не прыгает. Но это не вариант тем более. если вы говорите, что в вашем браузере, все равно прыгает. |
ekkl-82,
нужен специалист по css |
рони,
А какой у вас браузер? |
ekkl-82,
в Google Chrome стоит вроде, в остальных движется |
#confirm {
display:table;
}
#confirm .content {
display:table-cell !important;
vertical-align:middle;
}
|
Цитата:
|
| Часовой пояс GMT +3, время: 00:14. |