Question

我想在点击链接时使用css动画显示div，但它不起作用。有人可以帮忙吗？

这是我的代码

<div id="submit-logged-out">
    foo
</div>

<a href="#"> run</a>

$("a").click(function(){
      $('#submit-logged-out').addClass('popout');
});

#submit-logged-out {
background: #000;
color: #fff;
    width:80%;
    opacity:0;
}
    .popout {
        opacity:1;
        -webkit-animation: popout 2.25s ease;
        -moz-animation: popout 2.25s ease;
        -ms-animation: popout 2.25s ease;
        -o-animation: popout 2.25s ease;
        animation: popout 2.25s ease;
    }

    /* add all the rest*/
    @-webkit-keyframes popout {
        0%{-webkit-transform:scale(0)}
        80%{-webkit-transform:scale(1.05)}
        100%{-webkit-transform:scale(1)}
    }

    @-moz-keyframes popout {
        0%{-moz-transform:scale(0)}
        80%{-moz-transform:scale(1.05)}
        100%{-moz-transform:scale(1)}
    }

Answer 1

这只是ID比CSS中的类具有更高优先级的问题。因此，永远不会从弹出类中提取您的不透明度，而是使用ID中的一个（默认值为零）。从技术上讲，你的动画是有效的，但是你无法看到它们。

要解决此问题，只需将CSS规则从.popout更改为#submit-logged-out.popout即可。

所以，这个：

.popout {
...
}

应该是这样的：

#submit-logged-out.popout {
...
}

请在此处查看：http://jsfiddle.net/SSsVx/38/

努力使用css将div设置为视图动画

1 个答案: