在纯CSS中,是否可以将余量设置为当前元素的高度？

Question

我有一个垂直堆栈的项目,用户可以通过单击按钮附加一个项目,大致类似于此.

<ol>
  <li><textarea></textarea></li>
  <li><textarea></textarea></li>
</ol>
<a data-action="additem">Add another</a>

我正在尝试编写一个CSS动画,以便在li插入新动画时,"添加另一个"可以平滑地滑动到新的休息位置.li标签上的固定高度不是一个选项,我试图避免使用max-height动画黑客,因为它可能有奇怪的布局效果.

我发现我可以margin-bottom从某些东西动画到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;
    }
}

Answer 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-only hacks 一起使用的技巧是复制标记 - 在这种情况下，链接本身 - 并将其放置在将通过不同方式打开或关闭的父包装器中。这种方法的缺点是你会得到一个相当丑陋的标记，在这个特定的例子中，一个子弹编号看起来很刺耳（因为必须从li移到textarea）。

然而，这种方法的好处是通过将链接移动到 li您可以-100%在 y 轴上使用平移或其他偏移方法。奇怪的是，虽然我无法translateY(-100%)计算出基于...它似乎不是父身高，也许是它自己的身高。出于这个原因，我更新了小提琴以使用bottom和相对定位，尽管在 Firefox 中（在 mac 上）这会短暂出现故障。

它似乎是translateY基于它自己的高度计算百分比，所以为了解决这个问题，我已经尽量使用绝对位置，并迫使链路层承担相同的尺寸li...讨厌，因为它涉及textarea对链接上方的z 索引，以及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 版本（代码触发翻译）

http://jsfiddle.net/7m8F9/1/

以下显然没有考虑到您使用模板引擎来支持 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;
  }
}

重新设计版本

很多次我都遇到过类似的问题，结果发现重新设计有助于解决这个问题，而且通常实际上可以提高可用性。在您的情况下，最好将“添加链接”放在列表上方（或右上角），或者将按钮作为浮动图标集成到某处……无论您把它放在哪里，最好尝试保留它在静态位置，移动交互点可能会让用户感到厌烦，尤其是当他们希望快速连续添加多个项目时。