Как вызвать 3d-анимацию css при нажатии

Question

Я работаю над фальцевальной анимацией скрыть/показать, что я хотел бы запускать с помощью javascript.

Вот код и рабочий пример: http://dabblet.com/gist/1654665

Из всего сути, если вы предпочитаете: https://gist.github.com/1654665

Для временных существ, открытые и близкие анимации находятся в одних и те же ключевых кадрах наборов для простоты ради. Если я смогу решить проблему запуска эффекта сгиба + разворота на клик, я могу разделить его на две отдельные анимации.

Я пробовал использовать функцию анимации jQuery, но, похоже, она не распознает поворот и не переводит CSS3/webkit magic. Я также попытался переместить свойство имени-анимации в .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; 
} 

... У меня есть некоторые другие идеи, которые я планирую попробовать, но я думал, что забросить вопрос там, поскольку я уверен, что у многих из вас гораздо больше опыта в этом.

---

Наконец, если кто-то там заинтересованы в работе над этим со мной, чтобы довести его до состояния, когда он может быть легко использован, чтобы скрыть/показать все виды контента, я люблю компанию. Анимация вдохновлена ​​тем, что используется в expand quoted text в OSX Mail, и я хотел бы увидеть ее до такого уровня качества.

Answer 1

ах хороший способ я нашел, чтобы вызвать CSS3 анимации это, чтобы установить базовое состояние анимации в таблице стилей (где вы добавить CSS3 свойства анимации)

#element { 
    1stStateofCSS3Animation; 
} 

, и вы можете легко вызвать их с чем-то вроде этого. ..

$(element).click(function() { 

$(element).css(2ndStateofCSS3Animation); 

} 

Я Usally использовать это, когда я хочу, чтобы весь ДИВ запускает действие, а не только мой текст или изображения с якорем

Answer 2

То, что я должен был чан Г.Е. 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

Ответьте на запрос.

Пожалуйста, смотрите скрипку подробнее ..

(моя текущая версия использует 2D-преобразования .. Я сделал это, прежде чем я нашел этот вопрос) это может помочь, хотя .. 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 + ')'); 

     } 
    }); 
});​