CSS 从方向过渡答案

【问题标题】：CSS transition from directionCSS 从方向过渡
【发布时间】：2014-05-05 03:06:17
【问题描述】：

我知道如何进行淡入淡出 CSS 过渡，但是有没有解决方案可以从上到下淡出？

这是我的代码

.navbar-default{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

我需要从上到下的动画，有什么建议吗？

【问题讨论】：

您使用的是什么类型的淡入淡出？不透明度消失？
是的，但我想从汤姆到底部显示，没有淡入淡出，只是从上到下滑动

标签： css css-transitions opacity fade

【解决方案1】：

这对于纯 CSS 是不可能的。只有当我们可以使用纯 CSS 重新创建背景（也可能是前景）时，我们才能解决这种情况，这意味着纯色或可能渐变。这是因为使用opacity 会影响整个元素，并且无法按照您想要的方向进行

因此，我选择使用伪元素和一些渐变。因为在我的例子中，基本元素是黑色，背景是白色，所以我创建了一个渐变，下半部分从黑色渐变到白色，然后上半部分保持白色。然后，您可以使伪元素的高度是原始元素的两倍，将其放置在top:-200%，并使用transform:translateY(100%) 基本上从顶部淡化元素。实际上，这只是以一种欺骗我们眼睛的方式掩盖它。所有这一切都是通过元素上的overflow:hidden 实现的

Demo (webkit & 暂时没有前缀)

.elem {
    width:50px;
    height:50px;
    background:black;
    margin:20px;
    overflow:hidden;
    position:relative;
}
.elem:before {
    content:'';
    position:absolute;
    height:200%;
    width:100%;
    top:-200%;
    background:white;
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #000000 100%);
    transition:all 0.5s ease;
    left:0;
}
.elem:hover:before {
    transform:translateY(100%);
}

This tool 可以帮助您生成所需的渐变

可能有一种方法可以在不使用 javascript 的伪元素的情况下做到这一点

【讨论】：