过渡 - VoidCC

我想有一个具有子菜单的菜单，这是我的时刻（这是更复杂的比这个），我想用过渡性质：过渡

.product:hover #button-option { 
    visibility: visible !important; 
} 
#button-option { 
    visibility: hidden; 
    -webkit-transition: visibility .2s; 
    transition: visibility .2s; 
}

这里是我的jsfiddle：http://jsfiddle.net/4bsmq2kg/

我希望我的子菜单以后出现了一点，还是喜欢花一些时间来出现像在这里：http://www.vmware.com

如何才能使这项工作？我尝试了几件事，但都没有工作。谢谢！

编辑：我真的很愚蠢，并没有意识到代码中存在错误，但我仍然无法找到我真正想要找到的东西。

来源

2014-08-28 Lohn Claidon

发布您的html代码也可以做一个小提琴。 – Manwal 2014-08-28 04:38:03

[使用CSS3转换动画化非动画属性]（http://stackoverflow.com/questions/11605637/animating-non-animatable-properties-with-css3-transitions） – 2014-08-28 04:41:58

这与兄弟姐妹有什么关系组合子？ – 2014-08-28 04:47:23

可见性将会过渡，但仅限于二进制（开/关）方式。也许你还想在opacity上转换（因为visibility需要关闭以防止元素上的鼠标检测）。您可能也不需要/想要!important。另外，除非您定位旧浏览器版本，否则不需要webkit-transition前缀属性（如果您要指定它，则应为-webkit-transition）。

来源

2014-08-28 04:37:58

如果我把不透明度，子菜单将“永远”在那里，但只是看不见，所以它下面的内容将无法访问。我想要这样的子菜单：http://vmware.com – 2014-08-28 05:10:31

你需要结合'visiblility'和'opacity';看到这个问题被标记为可能的重复的问题。 – 2014-08-28 05:13:16

可见性不会很好。如果您需要的菜单滑动由左到右

#button-option { 
    opacity: 0; 
    -webkit-transition: all 0.5s ease-out; 
    -moz-transition: all 0.5s ease-out; 
    transition: all 0.5s ease-out; 
} 
.product:hover #button-option { 
    opacity: 1; 
}

，那么你也可以用动画的位置：对于您可以更好地制作动画的不透明度

#button-option { 
    left: -300px; 
    -webkit-transition: all 0.5s ease-out; 
    -moz-transition: all 0.5s ease-out; 
    transition: all 0.5s ease-out; 
} 
.product:hover #button-option { 
    left: 0px; 
}

您可以检查更详细here。

来源

2014-08-28 05:12:16 Husen

最后，我混合了可见性，谢谢大家！也会尝试一些你的建议，晚安！

来源

2014-08-28 05:18:41

过渡

回答

相关问题