如何制作像css过渡一样的过渡效果？

Question

当鼠标悬停在contentdiv 上时，我想制作一个非常常见的过渡效果，contentdiv 的背景图像会亮起，并且 div 内的infoheader 也会从左侧滑入.但是，由于我有 12 个，我不能将它们中的每一个命名为一个类/id，所以我不能（或者我不知道正确的方法）在 css 中做它们。

然后我尝试了jquery，并使用了

$(".container>.content").hover(function() { 

        $(this).find('.info').animate({
            "right": 0,
            "opacity": 1
        },200);
        $(this).find('img').animate({
            "opacity": 1
        },200);
    }, function() {
        $(this).find('.info').animate({
            "right": $(this).outerWidth(),
            "opacity": 0
        },200);
        $(this).find('img').animate({
            "opacity": 0
        },200);

    });

（我有 12 个 container div，每个都有一个 content 和一个 info 类）

基本上是mouseover和mouseleave的两组动画。

问题在于，与css过渡不同，鼠标进入/离开区域后，效果会在当前帧反转，jquery中的动画必须等到整个动画结束，这并不是真的在我的情况下工作。

有没有办法解决这个问题？

谢谢！

Answer 1

如果我对您的理解正确，您可以通过 CSS 过渡和使用 :hover 轻松做到这一点。请参阅 this working model。

CSS：

.content {
    font-size: 1.2em;
    padding: 5em;
}
.content .info {
    opacity: 0;
    transform: translateX(-100vw);
    transition: opacity .4s, transform .4s;
}
.content img {
    opacity: 0;
    transition: opacity .4s;
}
.content:hover .info {
    opacity: 1;
    transform: translateX(0);
}
.content:hover img {
    opacity: 1
}