我有一个垂直的元素堆栈，用户可以通过单击一个按钮来附加一个元素，大致是这样的。

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

animation: append forwards .5s;

@keyframes append {
    from {
        transform: translateX(10%);
        opacity: 0;
        margin-bottom: _____;
    }

    to {
        transform: none;
        opacity: 1;
        margin-bottom: 0;
    }
}

最佳答案

不是现在...

我多次遇到这个令人沮丧的问题，总是试图为非数字值设置动画，将当前元素的特定属性作为动画值访问，或者将未指定的值设置为指定的值。一般来说，我总是不得不退回到某种形式的不太完美 max-height动画(就像您已经提到的那样)或混合使用 CSS 和 JavaScript/jQuery。

对于您的问题，有几个选项，但没有一个是您所追求的。

仅 css 版本(使用重复标记和另一个动画)

<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>

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;
  }
}

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>

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);
  });
});

.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;
  }
}

关于html - 在纯 CSS 中，是否可以将边距设置为等于当前元素的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21004707/