Блог

Главная - Вопросы по программированию - Скорость переходов CSS3 во время выполнения

Скорость переходов CSS3 во время выполнения

#javascript #css

#javascript #css

Вопрос:

Я использую переходы CSS3, и мне интересно, запускается ли анимация с:

 -webkit-transform: translate3d(-100%, 0, 0);

Могу ли я каким-то образом увеличить скорость, которая была предварительно установлена с помощью:

 -webkit-transition: all 10s linear;

Я хочу, чтобы скорость составляла 2 секунды при использовании jQuery.

Ответ №1:

Похоже, вы можете с this.style["-webkit-transition"]

http://jsfiddle.net/X5shh/

HTML

 <div class="one"></div>

CSS

 .one
{
    -webkit-transition: all 10s linear;
    width:200px;
    height:20px;
    background:green;
}
.two
{
    -webkit-transform: translate3d(100%, 0, 0);
}

jQuery

 $("div").click(function(){
    $(this).toggleClass("two");
    this.style["-webkit-transition"] = "all 2s linear"
});

Редактировать

или

 this.style["-webkit-transition-duration"] = "2s";

Комментарии:

1. @UmairAshraf привет… Я придумал способ сделать это… но я не знаю, почему это работает, и мне бы очень хотелось, чтобы кто-нибудь это объяснил: ( jsfiddle.net/s2mLm/1

2. отлично. я тоже этого не понимаю

3. возможно, при удалении применяется другой переход, а при добавлении снова применяется весь css, за исключением свойства transition.

4. @UmairAshraf Я только что обсуждал это в чате с некоторыми другими разработчиками javascript, и, похоже, это, вероятно, потому, что setTimeout дает задержку минимум в 4 мс. Также кажется, что минимум webkit равен 10 мс. Следовательно, это дает ему достаточно времени для внесения изменений …… в теории