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

Question

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

这是代码和工作示例： http://dabblet.com/gist/1654665

如果您愿意的话，只是要点： https://gist.github.com/1654665

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

我尝试过使用 jQuery 的 animate 函数，但它似乎无法识别旋转和翻译 CSS3/webkit 魔法。我还尝试将动画名称属性移动到 .unfold 状态并使用 jQuery 设置 $("#stage").toggleClass("do_animation");

#stage.do_animation #topfold{
  animation-name: topfold;
}
#stage.do_animation #bottomfold{
  animation-name: bottomfold;
}
#stage.do_animation{
  animation-name: collapse_expand;
}

...我还有一些其他想法我打算尝试一下，但我想我应该把这个问题提出来，因为我确信你们中的许多人对此类事情有更多的经验。

---

最后，如果有人有兴趣与我一起研究这个问题，使其达到可以轻松用于隐藏/显示各种内容的状态，我会喜欢这家公司。该动画的灵感来自于 OSX Mail 中用于展开引用文本的动画，我'我很乐意看到它达到那样的质量水平。

Answer 1

按要求答复。

请参阅小提琴了解更多详细信息..

（我当前的版本正在使用 2d-transforms.. 我在发现这个问题之前做了这个）
不过这可能会有所帮助..
http://jsfiddle.net/pixelass/a74Eu/32/

我正在工作一个 jQuery 插件。

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

$(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 + ')');

        }
    });
});​

Answer 2

啊，我发现触发 css3 动画的好方法是在样式表中设置动画的基本状态（在其中添加 css3 动画属性），

#element {
   1stStateofCSS3Animation;
}

并且您可以使用类似的东西轻松触发它们...

$(element).click(function() {

$(element).css(2ndStateofCSS3Animation);

}

当我想要整个动画时，我通常使用这个div 触发动作，而不仅仅是我的带有锚点的文本或图像

Answer 3

我所做的就是像这样更改 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';};