悬停时从右滑出，鼠标伸出时从左滑入

Question

http://jsfiddle.net/vladimir_ze/ror4ccry/

我正在尝试使用 CSS 实现两种滑动效果。

• 悬停时，箭头应滑出框（向右移动），即没问题。

• 鼠标离开时，箭头应滑入框（从左起）

我尝试使用过渡来做到这一点，但我不确定是否可以这样做，如果不是，是否可以使用关键帧进行？

.arrow {
        width: 30px;
        border: 1px solid blue;
        overflow: hidden;
        margin-left: 50px;
    }
i.fa {
    font-size:50px;
    -webkit-transition-duration: 1s;
    -webkit-transform: translateX(1px);
}
.arrow:hover i {
    -webkit-transition-duration: 500ms;
    -webkit-transform: translateX(30px);
}

<div class="arrow">
   <i class="fa fa-angle-right"></i>
</div>

Answer 1

这是带有功能的分叉小提琴。它是通过关键帧动画完成的。

代码的重要部分：

.arrow i {
    /* animate initial appearance and whenever state returns to normal from :hover */
    -webkit-animation: translate-left-in 0.3s 1 cubic-bezier(0.7, 0, 0.3, 1);
     animation: translate-left-in 0.3s 1 cubic-bezier(0.7, 0, 0.3, 1);
}
.arrow:hover i {
    /* animate on hover */
    -webkit-animation: translate-left-out 0.3s 1 cubic-bezier(0.7, 0, 0.3, 1);
    animation: translate-left-out 0.3s 1 cubic-bezier(0.7, 0, 0.3, 1);
    /* Keep the state after the animation has finished */
    -webkit-transform:translateX(30px);
    transform:translateX(30px);
}
/* Keyframes */
@-webkit-keyframes translate-left-in {
    0%   { -webkit-transform:translateX(-30px); }
    100% { -webkit-transform:translateX(0); }
}
@keyframes translate-left-in {
    0%   { transform:translateX(-30px); }
    100% { transform:translateX(0); }
}
@-webkit-keyframes translate-left-out {
    0%   { -webkit-transform:translateX(0%); }
    100% { -webkit-transform:translateX(30px); }
}
@keyframes translate-left-out {
    0%   { transform:translateX(0%); }
    100% { transform:translateX(30px); }
}

Answer 2

你也可以用jQuery很容易做到这一点。

风格：

.arrow {
     width: 30px;
     height: 50px;
     border: 1px solid blue;
     overflow: hidden;
     margin-left: 50px;
     position: relative;
}
i.fa {
     width: 30px;
     height: auto;
     display: block;
     font-size: 50px;
     position: absolute;
     top: 0;
}

j查询：

$('body').on('mouseover', '.fa-angle-right', function() {
    $(this).animate({left: '30px'}, 500, function() {
        $(this).css('left','-31px');
    });
});
$('body').on('mouseout', '.fa-angle-right', function() {
   $(this).animate({left: '0'}, 500);
});

如果你把你的子绝对放在你的父（.arrow）中，你可以通过jQuery利用溢出：隐藏和左样式来实现你的目标。由于您已为父级 （.arrow） 提供了隐藏溢出，因此您可以对 进行动画处理以滑出边界。动画完成后，您可以更改 的绝对位置（左侧样式）以返回到起始位置（父项右侧，由于溢出：隐藏而隐藏）。然后只需对 进行动画处理即可滑回边界。

Answer 3

演示

这有点棘手。

• 添加了仅在启动时播放 1 次的animation。
• 悬停播放过渡（或动画）
• 如果在悬停上使用过渡，请将动画设置为无：
  这样做的作用是重置动画，然后在删除光标时再次播放它，因为它在由 css 再次添加时。

.CSS

elem. {
    width: 20px;
    transition, width 2s;
    animation: myanimation 2s 1; <- this playes first
}
elem:hover {
    //transitioned property's here
    width: 10px;
    //Remove animation for replay
    animation: none;
}
@keyframe {
    //your animation propertys etc.
}