这可能是我错过的真正非常愚蠢但我的CSS动画没有按预期工作。而不是分别淡出和分离的元素,我只是在它们之间得到一个快速,令人讨厌的变化。
提前道歉,因为我的课程起初可能会令人困惑。 before
是我想在悬停之前显示的课程内容。 after
是应该在悬停之后(或期间)显示的内容类。
应该有一个css不透明动画,它会使所有BEFORE内容淡出,所有AFTER内容都会淡入,但我无法让它工作。
我在发布之前引用了以下网站和SO文章:
CSS(SCSS):
.homepage-services-hover {
position: relative;
display: inline-block;
vertical-align: top;
width: 100%;
height: auto;
.before {
position: relative;
top: 0;
left: 0;
visibility: visible;
opacity: 1;
}
.after {
position: absolute;
top: 0;
left: 0;
visibility: visible;
opacity: 0;
}
&:hover {
.before {
opacity: 0;
transition: opacity .5s;
-moz-transition: opacity .5s;
-webkit-transition: opacity .5s;
position: absolute;
top: 0;
left: 0;
visibility: visible;
}
.after {
opacity: 1;
transition: opacity .5s;
-moz-transition: opacity .5s;
-webkit-transition: opacity .5s;
position: relative;
top: 0;
left: 0;
visibility: visible;
}
}
}
HTML:
<span class="homepage-services-hover" style="width: 175px; text-align: center;">
<a href="#">
<img class="before" src="https://placehold.it/150x150" alt="IMAGE" />
<span class="before">
<h5>Title</h5>
<P>
Excerpt
</P>
</span>
</a>
<img class="after" src="https://placehold.it/175x175" alt="IMAGE"/>
<a class="button after" href="#">TITLE</a>
</span>
所有开发都在本地服务器上完成,因此我无法发布实时链接。
我不知道JSFiddle支持SASS所以这里是Fiddle。
答案 0 :(得分:2)
应该有一个css不透明度动画,它可以制作所有BEFORE内容 淡出,所有AFTER内容都淡入,但我无法让它工作。
正如您已正确识别的那样,您只需要在所有元素上设置初始opacity
,然后将opacity transition
应用于相同的元素:
div {
display: inline-block;
vertical-align: top;
width: 200px;
height: 200px;
transition: opacity 1.5s ease-out;
}
div p {
color: rgb(255,255,255);
font-weight: bold;
font-size: 24px;
text-align: center;
}
div:nth-of-type(1) {
background-color: rgb(255,0,0);
opacity: 1;
}
div:nth-of-type(2) {
background-color: rgb(0,0,255);
opacity: 0;
}
div:nth-of-type(1):hover {
opacity: 0;
}
div:nth-of-type(1):hover + div:nth-of-type(2) {
opacity: 1;
}
&#13;
<div>
<p>Hover Me</p>
</div>
<div>
</div>
&#13;
答案 1 :(得分:0)
你的过渡不应该在悬停css中,而是在classe的基本CSS上,所以只需将你的css改为:
.homepage-services-hover {
position: relative;
display: inline-block;
vertical-align: top;
width: 100%;
height: auto;
.before {
position: relative;
top: 0;
left: 0;
visibility: visible;
opacity: 1;
transition: opacity .5s;
-moz-transition: opacity .5s;
-webkit-transition: opacity .5s;
}
.after {
position: absolute;
top: 0;
left: 0;
visibility: visible;
opacity: 0;
transition: opacity .5s;
-moz-transition: opacity .5s;
-webkit-transition: opacity .5s;
}
&:hover {
.before {
opacity: 0;
position: absolute;
top: 0;
left: 0;
visibility: visible;
}
.after {
opacity: 1;
position: relative;
top: 0;
left: 0;
visibility: visible;
}
}
}
应该完成工作;)
希望我能帮忙!