Блог

Главная - Вопросы по программированию - CSS 3 странная задержка анимации

CSS 3 странная задержка анимации

#css #css-animations #keyframe

#css #css-анимации #ключевой кадр

Вопрос:

Я пытаюсь создать анимацию скольжения CSS3. Скользящая часть работает, но восходящая часть, похоже, не запускается мгновенно, и я не могу понять, почему.

    .slideUp{
        -webkit-animation:slideUpFrames 1s;
        -webkit-animation-fill-mode: forwards;
    }

    @-webkit-keyframes slideUpFrames{
      0%{
        max-height:1000px;
      }

      100%{
        max-height:0px;
      }
    }

    .slideDown{
          -webkit-animation:slideDownFrames 1s;
          -webkit-animation-fill-mode: forwards;
    }

    .slidable{
        overflow: hidden;
    }

    @-webkit-keyframes slideDownFrames{
      0%{
        max-height: 0px;
      }

      100%{
        max-height:1000px;
      }
    }

Я создал скрипту (только для webkit): http://jsfiddle.net/5E7YQ /

Как я мог это исправить?

Ответ №1:

Анимация скольжения запускается немедленно, вы просто не можете увидеть первые 940 пикселей анимации, потому что ваш <ul class="slidable"> имеет высоту всего 60 пикселей.

введите описание изображения здесь

Итак, теперь, когда мы знаем, что происходит, вот как это можно исправить:

Рабочий пример

 .slideUp {
    -webkit-animation:slideUpFrames .5s; /* shorten time */
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes slideUpFrames {
    0% {
        max-height:60px; /* change 1000px to the height of the element */
    }
    100% {
        max-height:0px;
    }
}
.slideDown {
    -webkit-animation:slideDownFrames .5s; /* shorten time */
    -webkit-animation-fill-mode: forwards;
}
.slidable {
    overflow: hidden;
}
@-webkit-keyframes slideDownFrames {
    0% {
        max-height: 0px;
    }
    100% {
        max-height:60px; /* change 1000px to the height of the element */
    }
}

Или, если вы хотите, вы можете сократить все это и использовать .slideUp(); и .slideDown();

Рабочий пример 2

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

1. Спасибо за ответ, единственная проблема, с которой это связано, заключается в том, что я не знаю, сколько элементов li будет в ul, поэтому я не знаю точную высоту во время компиляции. Приведет ли использование jQuery к снижению производительности? CSS3 лучше справляется с подобными вещами, верно?

2. @user1613512 Обычно анимации css, как правило, немного плавнее, но у них все еще есть проблемы с поддержкой. Если вы уже используете jQuery для кнопок, использование slideUp / slideDown не должно быть проблемой.

3. @user1613512 Если вы знаете высоту ваших элементов li, но не знаете, сколько элементов li, вы могли бы прикрепить анимацию к элементам li, а не к ul, вот так: jsfiddle.net/5E7YQ/6