文章/答案/技术大牛

发布

社区首页 >问答首页 >如何实现像css转换那样的转换效果？

问如何实现像css转换那样的转换效果？
EN

Stack Overflow用户

提问于 2014-07-27 22:48:10

回答 1查看 107关注 0票数 0

当鼠标悬停在contentdiv上时，contentdiv的背景图像亮起，div内部的info头也从左侧滑入，我想要产生一个非常常见的转换效果。但是，因为我有12个，所以我不能将每个类/id命名为一个类/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类)

这基本上是鼠标上方和鼠标的两组动画。

问题是，与css转换不同，在鼠标进入/离开该区域后，在当前框架下效果将逆转，jquery中的动画必须等待整个动画结束，而在我的情况下并不真正有效。

有办法解决这个问题吗？

谢谢!

css-transitions

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-07-27 22:59:30

如果我对您的理解是正确的，那么通过CSS转换和:hover的使用，您可以很容易地做到这一点。见这种工作模式。

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
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24986415

复制

相似问题

问如何实现像css转换那样的转换效果？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何实现像css转换那样的转换效果？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何实现像css转换那样的转换效果？
EN