Question

我在几个浏览器中尝试过这种结构，但它不起作用。请帮忙找出我的错误。

<style>
.result{            
    width: 200px;
    height: 300px;
    background: #ff0000;
}           
.result #add{
    display:none;
}
.result:hover #add{
     -webkit-transition: top 1s ease-out 1.5s;
     -moz-transition: top 1s ease-out 1.5s;
     transition: top 1s ease-out 1.5s;
     display:block;
}
</style>

<div class="result">
    <div id="add">111</div>  
</div>

Answer 1

首先要清理的一些事项

您无法从display: none过渡到display: block。只是不可能发生。我建议将opacity: 0转换为opacity: 1，而不是转换为淡入效果
您的transition: top 1s ease-out 1.5s来电仅会为最高属性制作动画。这就是top在该行中的含义。您可以通过逗号分隔列表添加多个目标，例如top 1s ease-out, opacity 1s ease-out等等。或者，您可以将规则写为transition: 1s ease-out，它会对所有更改进行动画处理（但这可能会有一些较小的性能点击，而不是选择要设置动画的属性）。
使用CSS过渡时，您必须拥有初始和目标状态，否则动画将无效。代码中的一个示例是：

 .result{            
     width: 200px;
     height: 300px;
    top: 0;
    background: #ff0000;
}           
.result #add{
    opacity: 0;
    position: relative;
}
.result:hover #add{
     -webkit-transition: 1s ease-out 1.5s;
     -moz-transition: 1s ease-out 1.5s;
     transition: 1s ease-out 1.5s;
     opacity: 1;
     top: 40px;
}

而且，正如所写，应该适合你。

Answer 2

3个问题：

您已将top媒体资源转入top 1s ease-out 1.5s;转换但是没有top可以参考。
您还没有为position元素设置#add媒体资源
display:block;将触发快速重绘，这将阻止应用最高转换所需的正确CSS计算 - 尝试使用opacity而不是

这里全部适用于一个例子：

＆＃13;

.result{            
    width: 200px;
    height: 300px;
    background: #ff0000;
}           
.result #add{
  opacity: 0;
  position:relative;
  top:0;
}
.result:hover #add{
  opacity: 1;
   -webkit-transition: top 1s ease-out 1.5s;
      -moz-transition: top 1s ease-out 1.5s;
           transition: top 1s ease-out 1.5s;
  top:150px;
}

＆＃13;

<div class="result">
    <div id="add">111</div>  
</div>

＆＃13;

CSS元素转换

2 个答案: