Question

我有div div（孩子和父母），如果我隐藏了孩子，那么父母的身高会降低 - 父母的身高取决于内容（孩子的体型））。

我想要达到的目的是在父亲的身高降低时产生过渡效果，但问题是没有触发过渡。

我关于＆＃34;非触发过渡＆＃34;问题和所有似乎都有一些共同点：初始值没有设置正确，但我认为我的确可以。我是对的吗？

问：如何在隐藏/删除父级的情况下进行转换工作？

＆＃13;

#sub {
    width: 200px;
    height: 100px;
    background: blue;
}
.main:hover #sub {
    display: none;
}
.main {
    height: auto;
    min-height: 50px;
    max-height: 800px;
    width: 300px;
    background: red;
    color: white;

    -webkit-transition: min-height 500ms linear;
    -moz-transition: min-height 500ms linear;
    -ms-transition: min-height 500ms linear;
    -o-transition: min-height 500ms linear;
    transition: min-height 500ms linear;

    -webkit-transition: max-height 500ms linear;
    -moz-transition: max-height 500ms linear;
    -ms-transition: max-height 500ms linear;
    -o-transition: max-height 500ms linear;
    transition: max-height 500ms linear;

    -webkit-transition: height 500ms linear;
    -moz-transition: height 500ms linear;
    -ms-transition: height 500ms linear;
    -o-transition: height 500ms linear;
    transition: height 500ms linear;
}

＆＃13;

<div class="main">
    <p>Hover</p>
    <div id="sub"></div>
</div>

＆＃13;

Answer 1

正如评论中所述，display:none;和transition或animation不能一起使用，因为display不是动画财产。在这种情况下，CSS基本上忽略了转换。

至于解决方法问题：你必须明确定义当你想要消失或出现时CSS必须如何表现。它应该淡入/淡出吗？它应该失去/获得高度还是宽度？除此之外，您还可以尝试visibility这是可动画的。

当孩子慢慢消失时，这会降低父母的效果：

.main {
    height: auto;
    min-height: 50px;
    max-height: 800px;
    width: 300px;
    background: red;
    color: white;
}
#sub {
    width: 200px;
    height: 100px;
    background: blue;
    transition: height 500ms linear;
}
.main:hover #sub {
    height: 0;
}

<div class="main">
    <p>Hover</p>
    <div id="sub"></div>
</div>

为简单起见，我删除了所有这些供应商前缀。告诉我这是否是您想要的，如果您想要完成任何其他过渡。

删除子div不会触发转换

1 个答案: