<ol> <li><textarea></textarea></li> <li><textarea></textarea></li> </ol> <a data-action="additem">Add another</a>
我正在尝试编写一个CSS动画,以便当插入新的li时,“添加另一个”顺利地滑到新的休息位置. li标签上的固定高度不是一个选项,我试图避免使用max-height动画黑客,因为它可以有奇怪的布局效果.
我发现我可以从某个东西将边缘底部的动画设为0,并具有所需的效果,但是我无法弄清楚CSS中如何表达我想要应用此规则的元素的当前高度.百分比是相对于元素的宽度进行测量的,这不是我在这里需要的,我不能想到使用calc等来表达我想要的浏览器的一个聪明的技巧.
建议？
编辑
我使用带有重复绑定的模板将项目添加到列表中. JS只将另一个对象推送到可观察的数组中,框架处理实际的DOM插入. li标签上有以下CSS让它顺利进入：
animation: append forwards .5s;
并且append定义为：
@keyframes append {
from {
transform: translateX(10%);
opacity: 0;
margin-bottom: _____;
}
to {
transform: none;
opacity: 1;
margin-bottom: 0;
}
}
解决方法
我已经反对这个令人沮丧的问题多次,总是试图动画一个非数字值,访问当前元素的特定属性作为动画值,或者将未指定的值设置为指定的值.一般来说,我总是要回到某种形式的不太完美的最大高度动画(如你已经提到过的)或使用CSS和JavaScript / jQuery的混合.
对于你的问题,有几个选择,但没有一个是你以后的.
css只有版本(使用重复的标记和另一个动画)
> http://jsfiddle.net/7m8F9/2/
> http://jsfiddle.net/7m8F9/3/< - 使用底部和位置的改进版本：相对
> http://jsfiddle.net/7m8F9/5/ < - 更好的版本,回到translateY
通常与css-only黑客一起使用的一个技巧是复制标记 – 在这种情况下,链接本身 – 并将其放置在将以不同方式打开或关闭的父包装内.这种方法的缺点是你得到一个相当难看的标记,在这个特殊的情况下,一个显示出令人震惊的子弹数字(因为必须将不透明度动画从li移动到textarea).
然而,这种方法的好处是,通过移动li中的链接,您可以使用-1或100％的y轴进行翻译或其他偏移方法.奇怪的是,虽然我无法解决什么翻译(-100％)正在计算…它似乎不是父母的高度,也许这是它的高度.因此,我已经更新了小提琴来使用底部和相对位置,尽管在Firefox(在Mac上)这个短暂的毛病.
它似乎是translateY是根据自己的高度计算百分比,所以为了解决这个问题,我不得不使用位置绝对,并强制链接层承担与li相同的维度.烦人的,因为它涉及到在链接上方的文本区域进行z索引,以及内部跨度以抵消链接文本,但至少它可以工作.
以下代码在最新的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已经升级了？或者如果引入了某些方法来引用当前的元素维,不仅仅是它的偏移量.
It should be noted I didn’t have Internet Explorer around to test this with,but all other modern browsers seem happy.
标记：
<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;
}
}
重新设计版本
很多次我遇到了类似的问题,只有找到一个重新设计有助于消除这个问题,并且往往可以提高可用性.在您的情况下,最好将列表(或右上方)上的“添加链接”放置在一起,或将该按钮作为浮动图标集成在某个位置.无论您放在哪里,最好尝试保留在静态位置,移动交互点可能会让用户烦恼,特别是如果他们希望快速添加多个项目.
