如何觸發一個css三維動畫點擊

Question

我正在處理一個可以用javascript觸發的隱藏/顯示動畫。

下面的代碼和工作示例： http://dabblet.com/gist/1654665

剛要點，如果你喜歡： https://gist.github.com/1654665

對於時間感，在打開和關閉動畫是相同的關鍵幀集簡單的內清酒。如果我可以解決點擊觸發摺疊+展開效果的問題，那麼我可以將它分成兩個獨立的動畫。

我試過使用jQuery的動畫功能，但它似乎沒有認識到旋轉和翻譯CSS3/webkit魔術。我也試過動畫-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

啊好辦法，我找到觸發CSS3動畫這是設置動畫的基本狀態在樣式表（在其中添加CSS3動畫屬性）

#element { 
    1stStateofCSS3Animation; 
} 

，你可以很容易地像這樣的東西觸發它們。 ..

$(element).click(function() { 

$(element).css(2ndStateofCSS3Animation); 

} 

時，我想整個DIV觸發動作和我usally用這個不僅是我的文字或圖片與錨

Answer 2

我所做的就是給陳GE這樣的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';}; 

Answer 3

根據要求應答。

請參閱更詳細的小提琴..

（我現在的版本是使用二維變換。我做這個之前，我發現這個問題） 這可能幫助，但.. 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 + ')'); 

     } 
    }); 
});​