如何从未知值开始执行Javascript/CSS3动画？

我有一个

，在页面加载时我不知道它的高度

当页面加载时，如何使其滑入视图并粘在页面底部

我希望这段代码可以工作，但是

div

只是直接跳入视图，没有平滑的动画

var $warning = $('.bottom-warning');
var height = $warning.outerHeight();

/* Put div right below screen */
$warning.css('bottom', -height);

/* Make it visible */
$warning.css('display', 'inline-block');

/* Configure transition */
$warning.css('transition', 'bottom 400ms');

/* Apply new value */
/* SHOULDN'T VALUE BE ANIMATED? */
$warning.css('bottom', 0);

如果最后一行设置为稍后运行（使用

setTimeout

），那么它可以工作，但我希望避免这种情况，因为这是一种不好的做法

要求：使用本机CSS3转换或动画，不使用Javascript动画（包括jQuery动画）

如果您想获得“滑入”效果，从底部开始，您必须在屏幕外的某个位置设置默认的

底部

位置，如

-999em

。否则，就不会有任何“转换”，因为元素没有引用的起点。另外，给转换一个时间量，例如

底部1s

$（函数（）{
setTimeout（函数（）{
var$warning=$（'.bottomwarning'）；
var height=$warning.outerHeight（）；
/*将div放在屏幕的正下方*/
$warning.css（'底部'，高度）；
/*让它可见*/
$warning.css（'display'，'inlineblock'）；
/*配置转换*/
$warning.css（'transition'，'bottom1s'）；
/*应用新值*/
/*值不应该设置动画吗*/
$warning.css（'bottom'，0）；
}, 500);
});
body，html{
保证金：0；
填充：0；
}
.底部警告{
背景颜色：浅蓝色；
框大小：边框框；
显示：无；
左：0；
底部：-999em；
填充：20px；
位置：固定；
宽度：100%；
}

Lorem ipsum ipsum ipsum。
这个网站需要一个HTML呈现引擎将元素从页面上翻译出来，并在文档上应用一个类。准备将其恢复

.bottom-warning {
    background-color: lightblue;
    box-sizing: border-box;
    left: 0;
    padding: 20px;
    position: fixed;
    width: 100%;
    bottom:0;
    height: auto;
    transform:translateY(100%);
    transition: transform .5s ease;

}



$（文档）.ready（函数（）{
$（'.bottom warning'）.addClass（'up'）；
});
body，
html{
保证金：0；
填充：0；
}
.底部警告{
背景颜色：浅蓝色；
框大小：边框框；
左：0；
填充：20px；
位置：固定；
宽度：100%；
底部：0；
高度：自动；
转化：translateY（100%）；
转型：转型。5s轻松；
}
.自下而上{
转化：translateY（0%）；
}

Lorem ipsum ipsum ipsum。
这个网站需要一个HTML呈现引擎！
编辑

试试这个新的


$（函数（）{
setTimeout（函数（）{
$（“.bottom warning”）.addClass（“向上”）；
}, 500);
});
body，
html{
保证金：0；
填充：0；
}
.底部警告{
背景颜色：浅蓝色；
框大小：边框框；
左：0；
填充：0 20px；
位置：固定；
宽度：100%；
底部：-20px；
过渡：所有1都易于输入输出；
-webkit转换：所有1都易于输入输出；
高度：0px；
溢出：隐藏；
}
.起来{
高度：自动；
填充：20px；
底部：0px；
}

Lorem ipsum ipsum ipsum。
这个网站需要一个HTML呈现引擎！
既然您已经在使用JQuery为css设置动画，我建议您查找animate。它提供了平滑的滑动动画，您可以指定希望动画的速度。

如果您有
display:none
，当设置
display:inline block
（或
display:block
）时，您的转换将无法工作。您可以使用
setTimeout（fn，0）
hack-

关于
setTimeout（fn，0）
-。
我弄明白了为什么没有发生转换

当按顺序设置可设置动画的属性时，浏览器似乎会跳过转换。
要解决这个问题，我们必须强制重画，如中所述（向下滚动到“重画”部分）

因此，例如，添加：

var redraw = $warning[0].offsetHeight;

…在设置属性之前，似乎一切都按预期方式运行


非常感谢Alex MacCaw的精彩文章
 请在上面添加代码示例@谢尔盖德尼索夫完成了！这是可行的，但我不明白为什么。在配置转换时，我已经将
bottom
设置为
-height
，因此属性确实有一个定义的值。为什么在页面加载时设置一个值会有所不同？
-height
等于
-58
，例如，对于
底部定位而言，这不是一个正确定义的值。如果您想通过jQuery正确设置
底部
，您需要这样编写
$warning.css（'bottom'，'-'+height+'px'）使用“px”设置属性不会更改任何内容。事实上，jQuery已经在幕后做到了这一点。如问题所述，使用本机CSS3转换或等效转换是一项要求。AFAIK jQuery的动画不会转换为CSS3转换很好！我忘记了Transform，我确实试过了，但它似乎不起作用，除非我给它一个值，比如30。如果您可以使其与0一起工作，请共享一个fiddle@btx9000它在没有main
setTimeout（fn，500）
的情况下工作，检查，我更新了答案。你的小提琴似乎不工作。无论如何，我希望动画从页面的正下方开始，这就是问题所在。您的代码似乎使它从视口末端下方的-100%开始。对不起，没有选择库，我也有代码片段在那里工作。至于100%的事情，这几乎是不可察觉的。
var $warning = $('.bottom-warning');
var height = $warning.outerHeight();

$warning.css('bottom', -height);
$warning.css('display', 'inline-block');

setTimeout(function() {
    $warning.css('bottom', 0);
}, 0);

var redraw = $warning[0].offsetHeight;