Javascript 如何在单击时触发css 3d动画

我正在制作一个折叠隐藏/显示动画，我希望能够用javascript触发它

下面是代码和工作示例：

如果您愿意，请选择要点：

目前，为了简单起见，打开和关闭动画位于相同的关键帧集内。如果我可以解决在单击时触发折叠+展开效果的问题，那么我可以将其拆分为两个单独的动画

我尝试过使用jQuery的动画功能，但它似乎无法识别旋转和平移CSS3/webkit的魔力。我还尝试将animation name属性移动到.unfold状态，并使用jQuery设置

$（“#stage”）.toggleClass（“do#u animation”）

…我有一些其他想法，我打算尝试一下，但我想我会把这个问题抛到一边，因为我相信你们中的许多人在这方面有更多的经验


最后，如果有人有兴趣与我合作，把它带到一个可以很容易地用来隐藏/显示各种内容的状态，我会喜欢这个公司。该动画的灵感来源于OSX Mail中使用的动画，我很想看到它达到这样的质量水平。
啊，我发现触发css3动画的好方法是在样式表中设置动画的基本状态（在样式表中添加css3动画属性）

你可以很容易地用这样的东西触发他们

$(element).click(function() {

$(element).css(2ndStateofCSS3Animation);

}

当我想让整个div触发动作时，我通常会使用它，而不仅仅是我的文本或带有锚定的图像，我所做的是像这样更改CSS：

/* Fold/Unfold animation
Now with gradients and expanding container!
*/
body { margin-top: 200px; }

@keyframes topfold {
  0%  {
    transform: rotateX(0deg);
  }
  50%  {
    transform: rotateX(-90deg);
    box-shadow: inset 0px 100px 100px #AAA;
  }
  100% {
    -webkit-transform: rotateX(0deg);
  }
}

@keyframes bottomfold {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: translateY(-120px) translateZ(-120px) rotateX(90deg);
    box-shadow: inset 0px 100px 100px #CCC;
  }
  100% {
    transform: rotateX(0deg);
  }
}
@keyframes collapse_expand {
  0% {
    height: 240px;
  }
  50% {
    height: 0%;
  }
  100% {
    height: 240px;
  }
}

#stage {
  perspective: 400px;
  perspective-origin: 50% 0%;
  /*background: rgba(0,0,0,0.5);*/
}
#stage.test{
  animation-name: collapse_expand;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
  transform-style: preserve-3d;
}

.fold {
  margin: 0px;
  height: 100px;
  padding: 10px;
  /*border: 1px dashed black;*/
}

p {
  color: #333;
  font-family: HelveticaNeue-Light, Helvetica;
  font-size: 16px;
  font-weight: lighter;
  line-height: 20px;
}

#stage.test #topfold {
  transform-origin: 0% 0%;
  animation-name: topfold;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
  transform-style: preserve-3d;
}   

#stage.test #bottomfold {
  transform-origin: 0% 0%;
  animation-name: bottomfold;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
  transform-style: preserve-3d;
}

然后在JS中，我做了一些：

document.getElementById('#stage').className = 'test';

这对我很有效。因此，解决方案应该是：

var stage = document.getElementById('#stage');
stage.onclick = function(e){this.className = 'test';};

应要求回答

详情请看小提琴

（我当前的版本使用2d变换..我在发现这个问题之前做了这个）
不过这可能会有帮助。。

我正在为此开发jQuery插件。

我当前的jQuery（请看小提琴）

你还需要这个吗？我正在为这种动画制作jQuery插件。如果需要，我可以展示我的进步。否则我将等待插件准备好公开。@pixelass那太好了。这个项目是为了好玩，但它仍然是我感兴趣的东西。我特别希望看到一个内容不可知的版本。我有一个完全动态的版本（使用带有倾斜的2d变换）。所以3d视图是一个角度。我有范围控制器来控制折叠部分的高度和折叠百分比“活”。我会用我的第一个版本发布一个答案。（没有live change range控制器）非常感谢分享，这非常好。不过，在快速浏览之后，我发现了一些问题。我想以后再深入研究，但我现在正在工作。无论如何，折叠应该发生在内部而不是侧面，这样它就不会阻挡其他内容。此外，包装器应该转换为垂直收缩，以便可折叠部分后面的内容填充空间。在css中设置.wrapper{background:rgba（12,56,78,5）；}，您将看到一些问题。。我还在努力。。您可以使用范围元素来使用此实时版本。（尽管如此，仍然非常有说服力）。但是它会动态地改变阴影强度，所以更真实。我尝试将您的解决方案插入JSFIDLE中，但未能使其如您所说的那样工作。很抱歉回复太慢，正在做其他事情。你能分享一下JSFIDLE吗？
document.getElementById('#stage').className = 'test';

var stage = document.getElementById('#stage');
stage.onclick = function(e){this.className = 'test';};

$(document).ready(function() {
    var button = $('button#folder'),
        buttonSet = $('button#setter'),
        fold = $('.wrapper'),
        odd = $('.wrapper .part:nth-child(1)'),
        even = $('.wrapper .part:nth-child(2)'),
        gVal = $('input.perc').attr('value') / 25,
        hVal = $('input.heig').attr('value'),
        shadHeight = hVal / 2,
        closed = false;

    buttonSet.click(function() {
        gVal = $('input.perc').attr('value') / 25;
        hVal = $('input.heig').attr('value');
        fold.find('.part').css('height',hVal + 'px');
        shadHeight = hVal / 2;
    });
    button.click(function() {

        var rePos = hVal / 4 * gVal,
            rePosWrap = rePos * 2,
            newDeg = 90 / 4 * gVal,
            newScal = 1 - (1 / 4 * gVal);
        if (closed) {
            button.text('fold');
           fold.css('-webkit-transform', 'translateY(0px) translateX(0px)');
           odd.css('-webkit-transform', 'skewX(0deg) scaleY(1)').css('box-shadow','-4px 4px 4px rgba(0,0,0,0.2), 0 0 0 rgba(0,0,0,0) inset, 0 0 0 rgba(0,0,0,0) inset');
           even.css('-webkit-transform', 'skewX(0deg) scaleY(1)').css('box-shadow','-4px 4px 4px rgba(0,0,0,0.2), 0 0 0 rgba(0,0,0,0) inset, 0 0 0 rgba(0,0,0,0) inset');
            $(".partwrap").each(function() {
                $(this).css('-webkit-transform', 'translateY(0px)');
            });
            fold.toggleClass('close');
            closed = false;
        } else {
            button.text('unfold');
            fold.css('-webkit-transform', 'translateY(-' + rePos + 'px) translateX(' + rePos + 'px)');
            odd.css('-webkit-transform', 'skewX(' + newDeg + 'deg) scaleY(' + newScal + ')').css('box-shadow','-4px 4px 8px rgba(0,0,0,0.2), 0 ' + shadHeight + 'px ' + shadHeight + 'px rgba(111,111,111,0.2) inset, 0 -' + shadHeight + 'px ' + shadHeight + 'px rgba(255,255,255,0.2) inset');
            even.css('-webkit-transform', 'skewX(-' + newDeg + 'deg) scaleY(' + newScal + ')').css('box-shadow','-4px 4px 8px rgba(0,0,0,0.2), 0 ' + shadHeight + 'px ' + shadHeight + 'px rgba(111,111,111,0.2) inset, 0 -' + shadHeight + 'px ' + shadHeight + 'px rgba(0,0,0,0.2) inset');

            $(".partwrap").each(function() {
                var goUp = $(".partwrap").index(this) * rePosWrap;
                $(this).css('-webkit-transform', 'translateY(-' + goUp + 'px)');
            });
            fold.toggleClass('close');
            closed = true;
            console.log('-webkit-transform', 'skewX(' + newDeg + 'deg) scaleY(' + newScal + ')');

        }
    });
});​