CSS3过渡和javascript交互[重复]

Question

有什么方法可以在 CSS 3 过渡结束时运行一些特定的 JavaScript 代码？

例如，我需要在 y 轴上将一个 div 从 0 缩放到 1，然后将其内容可见性从隐藏设置为可见。

    <style>
    .scaleOn {-webkit-transform: scaleY(1.0); -webkit-transition: -webkit-transform 2s; }
    </style>

    function setVisibility() {
    $("#content").css({visibility: 'visible'});
    }

    function dataHere() {
    $("#contentWrapper").addClass('scaleOn'); // and now what? I need run setVisibility when transition ends
    }

    <div style="-webkit-perspective:200px">
    <div id="contentWrapper" style="-webkit-transform: scaleY(0.0)">
    <div id="content"></div>
   </div>
   </div>

Answer 1

也许你根本不需要 Javascript - visibility 可以转换，转换可能有延迟：

#contentWrapper {
  visbility: hidden;
  -webkit-transition: -webkit-transform 2s, visibility 0s linear 2s;
}
.scaleOn {
  visibility: visible;
}

将在 2 秒后显示 .scaleOn，直接在转换完成后。