Как запустить анимацию CSS на клике - PullRequest
Новая
       27

Как запустить анимацию CSS на клике

3 голосов
/ 22 января 2012

Я работаю над складывающейся анимацией скрытия / показа, которую я бы хотел задействовать с помощью 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, и я бы хотел довести его до такого уровня качества.

Ответы [ 3 ]

1 голос
/ 22 февраля 2012

Ответ по запросу.

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

(моя текущая версия использует 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 + ')');

        }
    });
});​
0 голосов
/ 23 января 2012

Я изменил 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';};
0 голосов
/ 22 января 2012

хороший способ запуска анимации css3 - установить базовое состояние анимации в таблице стилей (где вы добавляете свойства анимации css3) 

#element {
   1stStateofCSS3Animation;
}

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

$(element).click(function() {

$(element).css(2ndStateofCSS3Animation);

}

Обычно я использую это, когда хочу, чтобы весь div запускал действие, а не только мой текст или изображения с привязкой

...