Question

我正在处理折叠隐藏/显示动画，我希望能够使用javascript触发。

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

如果您愿意，只需要一个要点： https://gist.github.com/1654665

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

我尝试过使用jQuery的动画功能，但似乎并没有认识到旋转和翻译CSS3 / webkit魔法。我还尝试将animation-name属性移动到.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中习惯expand quoted text的动画，我喜欢看到它达到这个级别的质量。

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';};

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

3 个答案: