方向的 CSS 过渡

Question

我知道如何进行淡入淡出的 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;
}

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

Answer 1

这对于纯 CSS 是不可能的。只有当我们可以使用纯 CSS 重新创建背景(可能还有前景)时，我们才能解决这种情况，这意味着纯色或可能渐变。这是因为使用 opacity 会影响整个元素，并且不能按照您希望的方向移动

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