Question

我在CSS中制作了一个模态弹出窗口，然后在点击链接后翻译（translateY）。我的问题是弹出确实出现但它已经在下行。我知道如何在悬停时进行翻译，但我无法弄清楚如何在不悬停的情况下翻译它。谁能给我一些建议？

HTML

<a href='#A'>Open</a>
<div id='A' class='B'>
<div class='C'>
Test</div>
</div>

CSS

.B {
    position:fixed;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    background:rgba(0,0,0,0.8);
    opacity:0;
    z-index:99999;
    pointer-events:none;
}
.B:target {
    opacity:1;
    pointer-events:auto;
}
.B > .C {
    width:100px;
    height:100px;
    background:#FFF;
    background:-moz-linear-gradient(#FFF, #999);
    background:-webkit-linear-gradient(#FFF, #999);
    background:-o-linear-gradient(#FFF, #999);
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    -ms-border-radius:15px;
    -o-border-radius:15px;
    border-radius:15px;
    position:relative;
}
.C {
-webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;    
-webkit-transform: translate(0px, 50px);
-moz-transform: translate(0px, 50px);
-o-transform: translate(0px, 50px);
-ms-transform: translate(0px, 50px);
transform: translate(0px, 50px);
}

的jsfiddle http://jsfiddle.net/M5tcL/16/

Answer 1

CSS过渡使得属性值的变化对于查看者来说是平滑的（补间？）。

你永远不会在这里更改css属性的值，因此没有任何动画可用。

必须有两个具有不同值的css状态。你需要使用javascript或复选框来完成这项工作。

您可以使用javascript在body元素上切换一个类，例如a checkbox with an associated label。

然后你可以使用

/* Normal state */
.C{
    opacity: 0;
    transition: all .3s;
}
/* Open state */
:checked ~ .C,
/* OR */
body.open .C{
    opacity: 1;
}

在此代码段示例中，不透明度将在0和1之间变换时获得动画。

CSS翻译正常

1 个答案: