Question

当我在图像上方悬停时，我试图获得一些不错的过渡效果。（悬停div与鼠标的方向相同）。

一切正常，只是“悬停在”过渡不是直线，而是更像是对角线＆amp;填充方式。（在下面的例子中，过渡是从左边：-378px;到左边：0px / top是0）。

正常状态：

<div class="hover_effect initial_hover slideFromLeft" style="display: block;">link aici</div>

悬停状态（删除类并通过jQuery添加）：

<div class="slideFromLeft hover_effect initial_hover slideLeft" style="display: block;">link aici</div>

我希望机芯像悬停过渡一样直线，工作正常。你能指出我的错误吗？

这是html＆amp; css代码：

<div class="portfolio-sample regular-portfolio coding-2   isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate(0px, 0px);">
<img width="455" height="295" src="http://localhost/wp-content/uploads/2013/01/env0251-455x295.jpg" class="attachment-portfolio-two wp-post-image" alt="env025">        
<div class="slideFromLeft hover_effect initial_hover slideLeft" style="display: block;">link aici</div>
<div class="custom_slider_shadow"></div>
</div>

谢谢！

 .hover_effect{
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.initial_hover{
position: absolute;
background: rgba(75,75,75,0.7);
width: 378px;
height: 245px;
top: 260px;
}

.slideFromLeft {
top: 0px; 
left: -378px;
}

.slideLeft {
left: 0px;
}

答案：好吧我明白了 - 这是因为在悬停时slideFromLeft之后添加了initial_hover类。一旦我扭转这些，它就像我预期的那样工作

Answer 1

它不是线性的，因为它被指定为非线性的。如果您想要线性转换，则应在ease-in-out的样式中将ease和linear更改为.hover_effect。

Css过渡不是线性的

1 个答案: