如何使过渡更加顺畅？

Question

如何使过渡更加顺畅？

6

我正在尝试创建两个容器，它们将放置在同一位置。当我鼠标悬停在顶部一个上面时，应该受到一些过渡的影响，并且底部/第二个div的内容应该显示出来。我在这里尝试了这个。

一切都很好。但是当我鼠标悬停在上面时，它会产生一些闪烁效果。如何使过渡更平滑？我正在使用以下代码段进行过渡效果：

.box:hover{
    -webkit-transform:  rotate(100deg) scale(1);
    -webkit-transform-origin:bottom right;
}

- Mihir

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mr. Alien · Accepted Answer

使用CSS transition 属性使动画更加平滑。

.box {
    height:150px;
    width:200px;
    background:indianred;
    position:absolute;
    top:20%;
    left:40%;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

演示

注意：您正在使用 -webkit 特有的私有属性，为了使其跨浏览器兼容，请使用

演示

.box {
    height:150px;
    width:200px;
    background:indianred;
    position:absolute;
    top:20%;
    left:40%;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}
.box1 {
    height:150px;
    width:200px;
    border:1px solid black;
    position:absolute;
    top:20%;
    left:40%;
    z-index:-100;
}
.box:hover {
    -webkit-transform: rotate(100deg) scale(1);
    -webkit-transform-origin:bottom right;
     -moz-transform: rotate(100deg) scale(1);
    -moz-transform-origin:bottom right;
     transform: rotate(100deg) scale(1);
    transform-origin:bottom right;
}

好的，你在你的评论中要求一个解决方案，我也为此提供了一个解决方案。

<div class='box1'>
    <div class='box'></div>
    <p class="innerText">This is content</p>
</div>

.box {
    height:150px;
    width:200px;
    background:indianred;
    position:absolute;
    top:0%;
    left:0%;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}
.box1 {
    height:150px;
    width:200px;
    border:1px solid black;
    position:absolute;
    top:20%;
    left:40%;
    z-index:-100;
}
.box1:hover .box {
    -webkit-transform: rotate(100deg) scale(1);
    -webkit-transform-origin:bottom right;
     -moz-transform: rotate(100deg) scale(1);
    -moz-transform-origin:bottom right;
     transform: rotate(100deg) scale(1);
    transform-origin:bottom right;
}

演示

我的代码与你的代码的不同之处在于，首先，你错过了一个围绕着具有position: absolute;属性的元素的position: relative;容器，这将始终带来不想要的结果。

第二个错误是标记，如果你想隐藏一个元素，你应该嵌套一个覆盖元素，而不是将其放在你想要隐藏的元素外面。

因此在我的例子中，我将覆盖元素移动到了div中，并且主要部分在于，你在同一个要变换的元素上使用了:hover，因此它会无缘无故地折叠，相反，在我的选择器中，我在父元素的:hover上触发动画，而不是要转换的元素本身。