Ответ 1
Не в настоящее время...
Я часто сталкивался с этой неутешительной проблемой, всегда пытаясь либо анимировать нечисловое значение, доступ к определенному свойству текущего элемента как значения анимации, либо анимировать неопределенное значение указанному, Как правило, мне всегда приходится возвращаться к какой-то не совсем совершенной анимации max-height (как вы уже упоминали) или использовать смесь CSS и JavaScript/jQuery.
Для вашей проблемы есть несколько вариантов, но ни один из них не подходит именно вам.
только версия css (с использованием дублированной разметки и другой анимации)
- http://jsfiddle.net/7m8F9/2/
- http://jsfiddle.net/7m8F9/3/ < - улучшенная версия с использованием
bottomиposition:relative - http://jsfiddle.net/7m8F9/5/ < - еще лучшая версия, возвращаясь к
translateY
Один трюк, часто используемый с использованием только CSS-хаков, заключается в дублировании разметки — в этом случае, ссылка iteself — и поместите его в родительские обертки, которые будут включены или выключены различными способами. Недостатки этого метода заключаются в том, что вы получаете довольно уродливую разметку, а в этом конкретном случае - номер пули, который появляется резким образом (из-за необходимости переместить анимацию непрозрачности с li на textarea).
Преимущество этого метода состоит в том, что, перемещая ссылку внутри li, вы можете использовать -100% по оси y с помощью перевода или другого метода смещения. Как ни странно, хотя я не могу понять, что вычисляет translateY(-100%) на основе... , он, кажется, не является родительской высотой, возможно, это высота самого себя. По этой причине я обновил скрипту, чтобы вместо этого использовать bottom и относительное позиционирование, хотя в Firefox (на Mac) это глючит ненадолго.
Кажется, что translateY вычисляет процент, основанный на собственной высоте, поэтому, чтобы обойти эту проблему, мне пришлось использовать абсолютную позицию и заставить слой ссылки принимать те же размеры как li... раздражает, так как он включает z-индексацию textarea над ссылкой и внутренний span для смещения текста ссылки, но по крайней мере он работает.
Следующий код работает в последнем Firefox и будет работать в других современных браузерах, если бы все различные префиксы браузера были правильно использованы для определения ключевых кадров анимации, у меня нет времени, чтобы установить их все прямо сейчас.
Разметка:
<ol class="list">
<li><textarea></textarea><a class="add" href="#"><span>Add another</span></a></li>
<li><textarea></textarea><a class="add" href="#"><span>Add another</span></a></li>
</ol>
CSS
ol li {
position: relative;
}
ol li .add {
display: none;
}
ol li:last-child .add {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
height: 100%;
display: block;
animation-duration: 1s;
animation-name: slide;
}
ol li:last-child .add span {
position: absolute;
bottom: -20px;
}
.list li textarea {
position: relative;
animation-duration: 1s;
animation-name: append;
z-index: 1;
}
@keyframes append {
from {
transform: translateX(10%);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
@keyframes slide {
from {
transform: translateY(-100%);
}
to {
transform: none;
}
}
версия javascript (транслируемые с помощью кода)
Следующие, очевидно, не учитывают тот факт, что вы используете механизм шаблонов для управления вашими DOM-манипуляциями, но весь код должен работать правильно - это до и после высоты списка (чтобы вычислить разницу в высота) и событие для запуска в точке добавления нового элемента списка.
К сожалению, пока все это невозможно сделать в чистом CSS, по крайней мере, не настолько, насколько я видел, возможно, однажды calc выровнял...? Или, возможно, если какой-то способ вводится для ссылки на текущие размеры элементов, а не только на смещение родителя.
Следует отметить, что у меня не было Internet Explorer, чтобы проверить это, но все остальные современные браузеры выглядят счастливыми.
Разметка:
<ol class="list">
<li><textarea></textarea></li>
<li><textarea></textarea></li>
</ol>
<div class="add">
<a href="#">Add another</a>
</div>
javascript (с jQuery):
function prefix(){
for ( var a = ['Webkit','Moz','O','ms'], i=0, l = a.length; i<l; i++ ) {
if ( document.body.style[a[i]+'AnimationName'] !== undefined ) {
return { js: a[i], css: '-' + a[i].toLowerCase() + '-' };
}
}
return { css:'', js:'' };
}
$(function(){
$('.add a').click(function(e){
e.preventDefault();
var pref = prefix(),
link = $(this).parent(),
list = $('.list'),
lihi = list.height(),
liad = $('<li><textarea></textarea></li>').appendTo(list),
lihd = lihi - list.height();
link.css(pref.css + 'transform', 'translateY(' + lihd + 'px)');
setTimeout(function(){link.addClass('translate-zero transition-all');},0);
setTimeout(function(){
link.css(pref.css + 'transform', '');
link.removeClass('translate-zero transition-all');
},500);
});
});
CSS
.transition-all {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.translate-zero {
-webkit-transform: translateY(0) !important;
-moz-transform: translateY(0) !important;
-ms-transform: translateY(0) !important;
-o-transform: translateY(0) !important;
transform: translateY(0) !important;
}
.list li {
animation-duration: 1s;
animation-name: append;
}
@keyframes append {
from {
transform: translateX(10%);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
версия для редизайна
Несколько раз я сталкивался с подобной проблемой, но только для поиска редизайна помогает избавиться от проблемы и часто может фактически улучшить удобство использования. В вашем случае может быть лучше разместить "добавить ссылку" над списком (или вверху справа) или интегрировать кнопку как плавающий значок где-нибудь... где бы вы ни выразили это, лучше попытаться сохранить его в статическом местоположении движущиеся точки взаимодействия могут раздражать пользователей, особенно если они хотят добавить более одного элемента в быстрой последовательности.
