animationCSS3：显示+不透明度
我有一个CSS3animation的问题。
.child { opacity: 0; display: none; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .parent:hover .child { opacity: 0.9; display: block; } 此代码仅适用于删除显示更改。
我想在hover之后改变显示，但不透明度随着转换而改变。
基于Michaels的答案，这是实际使用的CSS代码
.parent:hover .child { display: block; -webkit-animation: fadeInFromNone 0.5s ease-out; -moz-animation: fadeInFromNone 0.5s ease-out; -o-animation: fadeInFromNone 0.5s ease-out; animation: fadeInFromNone 0.5s ease-out; } @-webkit-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } @-moz-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } @-o-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } @keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } }
你可以使用CSSanimation：
0% display:none ; opacity: 0; 1% display: block ; opacity: 0; 100% display: block ; opacity: 1;
如果可能的话 – 使用visibility而不是display
例如：
.child { visibility: hidden; opacity: 0; transition: opacity 0.3s, visibility 0.3s; } .parent:hover .child { visibility: visible; opacity: 1; transition: opacity 0.3s, visibility 0.3s; }
我改变了一点，但结果是美丽的。
.child { width: 0px; height: 0px; opacity: 0; } .parent:hover child { width: 150px; height: 300px; opacity: .9; }
谢谢大家。
此解决方法的工作原理：
-
定义一个“关键帧”：
@-webkit-keyframes fadeIn { 0% { opacity: 0; } 20% { opacity: 0; } 40% { opacity: 0.3; } 60% { opacity: 0.5; } 80% { opacity: 0.9; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 20% { opacity: 0; } 40% { opacity: 0.3; } 60% { opacity: 0.5; } 80% { opacity: 0.9; } 100% { opacity: 1; } } -
在“hover”上使用这个“关键帧”：
div a span { display: none; } div a:hover span { display: block; -webkit-animation-name: fadeIn; -webkit-animation-duration: 1s; animation-name: fadeIn; animation-duration: 1s; }
我有同样的问题。 我尝试使用animation代替转换 – 正如@MichaelMullany和@Chris所build议的 – 但是，即使我用“-moz”和“-o”前缀进行复制粘贴，它也只能用于webkit浏览器。
我能够通过使用visibility而不是display来解决这个问题。 这适用于我，因为我的子元素是position: absolute ，所以文档stream不受影响。 它也可能适用于其他人。
这就是使用我的解决scheme的原始代码的样子：
.child { position: absolute; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .parent:hover .child { position: relative; opacity: 0.9; visibility: visible; }
还有一个很好的方法可以通过使用指针事件来完成：
.child { opacity: 0; pointer-events: none; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .parent:hover .child { opacity: 0.9; pointer-events: all; }
不幸的是，这在IE10及以下版本中不被支持。
在绝对或固定元素上，您也可以使用z-index：
.item { position: absolute; z-index: -100; } .item:hover { z-index: 100; }
其他元素现在应该有-100和100之间的z-index。
我用这个来实现它。 所以他们褪色hover，但隐藏时没有空间，完美！
.child { height: 0px; opacity: 0; visibility: hidden: transition: all .5s ease-in-out; } .parent:hover child { height: auto; opacity: 1; visibility: visible: }
我做的一件事就是将初始状态的边距设置为“margin-left：-9999px”，所以它不会出现在屏幕上，然后在hover状态下重置“margin-left：0”。 在这种情况下保持“显示：阻止”。 对我来说，诀窍:)
编辑：保存状态，不恢复到以前的hover状态？ 好的，我们需要JS：
<style> .hovered { /* hover styles here */ } </style> <script type="text/javascript"> $('.link').hover(function() { var $link = $(this); if (!$link.hasclass('hovered')) { // check to see if the class was already given $(this).addClass('hovered'); } }); </script>
我知道，这不是真的解决你的问题，因为你要求
显示+不透明度
我的方法解决了一个更普遍的问题，但也许这是背景问题，应该通过结合使用opacity display来解决。
我的愿望是当元素不可见时将元素排除在外。 这个解决scheme确实如此：它将元素从外面移开，并且可以用于转换：
.child { left: -2000px; opacity: 0; visibility: hidden; transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s; } .parent:hover .child { left: 0; opacity: 1; visibility: visible; transition: left 0s, visibility 0s, opacity 0.8s; }
此代码不包含任何浏览器前缀或向后兼容性黑客。 它只是说明元素如何被移走的概念，因为它不再需要。
有趣的部分是两个不同的转换定义。 当鼠标指针hover在.parent元素时，需要立即将.child元素放置到位，然后不透明度将被更改：
transition: left 0s, visibility 0s, opacity 0.8s;
如果没有hover，或者鼠标指针从元素上移开，则必须等到不透明度更改完成之后才能将元素移出屏幕：
transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
在设置display:none的情况下移动对象将是一个可行的替代方法display:none不会破坏布局。
虽然我没有回答这个问题，但我希望自己能够在这个问题上达成一致。
如果你用JS触发这个变化，让我们说点击，有一个很好的解决方法。
您看到问题发生，因为在display：none元素上忽略animation，但浏览器一次应用所有更改，而元素永远不会显示：block，同时不会同时animation。
诀窍是要求浏览器在更改可见性之后但在触发animation之前渲染框架。
这是一个JQuery的例子：
$('.child').css({"display":"block"}); //now ask the browser what is the value of the display property $('.child').css("display"); //this will trigger the browser to apply the change. this costs one frame render //now a change to opacity will trigger the animation $('.child').css("opacity":100);
display:不可转换。 你可能需要使用jQuery来做你想做的事情。
