这是一个粗略的例子,以帮助显示我想要的：
http://jsfiddle.net/GVaNv/
我想知道是否还有从左侧进行叠加过渡,但是从右侧离开.
因此,在悬停时,叠加层会像示例中那样进入,但不是向后退到左侧,而是向右转换.
这可能吗？ (不一定需要使用转换,我可以通过任何方式进行转换).
解决方法
这是一个不需要更多HTML或JavaScript的简单解决方案：
- <div class="Box">
- <div class="overlay">
- Overlay
- </div>
- </div>
CSS代码：
- .Box {
- height: 250px;
- width: 250px;
- background: aqua;
- position: relative;
- overflow: hidden;
- }
- .overlay {
- position: absolute;
- background-color: rgba(0,0.5);
- width: 100%;
- color: white;
- padding: 10px;
- left: -270px;
- margin-left: 520px;
- bottom: 0;
- transition: left 300ms linear,margin-left 300ms ease-out;
- }
- .Box:hover .overlay {
- left: 0;
- margin-left: 0;
- transition: left 300ms ease-out;
- }
这利用了动画的余量.它的工作原理如下：
>使用边距将叠加静止状态设置在元素的右侧(而左边位于元素的左侧).
>悬停时,我们将边距设置为0,没有动画.这允许左侧动画从元素的左侧发生.
>在鼠标移出时,边缘被动画化以在元素的右侧进入其静止状态.
