Question

我遇到了一个非常恼人的问题，看着转型 - ＆gt;翻译。

目前，我正在从右到左淡化我的导航“块”。现在，我希望每一个都有悬停效果，所以当你将鼠标悬停在它上面时，该块会向右转移一点点。

为此，我使用了这段代码：

.navpoint:hover {
-webkit-transform: translate(20px, 0px);
-moz-transform: translate(20px, 0px);
-o-transform: translate(20px, 0px);
-ms-transform: translate(20px, 0px);
transform: translate(20px, 0px);
}

这实际上应该可行，但是看一下这个演示，这些街区甚至都不会向右移动。

这是demo

我觉得我设置的内容不对，请先查看我的HTML设置：

<div class="navigation">
<h2 class="animated fadeInRightBig1 navpoint one">Working process</h2>
<h2 class="animated fadeInRightBig2 navpoint two">Subscribe</h2>
<h2 class="animated fadeInRightBig3 navpoint three">Contact us</h2>
</div>

解释：“动画”是每个“fadeInRightBig”中设置的一般动画，自定义时间和延迟。

“navpoint”看起来像这样：

.navpoint {
padding-left:5px;
padding-right:5px;
margin-top:0px;
margin-bottom:1px;
border-right:solid;
border-color:#333;
border-width:4px;
background:#FC3;
cursor:pointer;

}

我的html中的“one / two / 3”被设置为navpointm的底层，就像这样：

.navpoint.one {
width:96.73202614379085%;

}

这是我的设置，我想我的Navpoint类有问题，但我不知道是什么。如果你能回答这个问题并帮助我，那将是非常非常友好的。

非常感谢你。

Answer 1

据我所知，您的幻灯片动画干扰了您设置的变换：悬停。

不确定具体的解决方法（如果有一个简单的解决方案）除了通过Javascript删除动画类（或者可能稍微改变动画参数），但解决这个问题的一个简单方法就是改变导航项如何设置动画：悬停。

不要使用变换，只需设置左边距：

.nav.one:hover {
    margin-left:20px;
}

您将获得相同的结果。它可以通过CSS过渡动画。

Answer 2

您可以尝试使用transitions属性来实现此效果：

.navpoint {
    padding-left:5px;
    padding-right:5px;
    margin-top:0px;
    margin-bottom:1px;
    border-right:solid;
    border-color:#333;
    border-width:4px;
    background:#FC3;
    cursor:pointer;
    transition:all 1s ease-in-out;
    -webkit-transition:all 1s ease-in-out; 
}

.navpoint:hover {
    margin-left: 20px;
}

工作示例可以在这里看到：http://codepen.io/jonwelsh/pen/sfewj

如何让CSS-Transforms工作

2 个答案: