Блог

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

Создание простой анимации скольжения и скольжения в css

#css #animation

Вопрос:

У меня есть такой css

   .top-over {
    position: absolute;
    top: 205px;
    z-index: 55;
    width: 100%;
    min-height: 300px;
  }
  
  @keyframes slideDown {
    0% {
      -webkit-transform: translateY(-420px);
    }

    100% {
      -webkit-transform: translateY(0%);
    }
  }

  .slideDown {
    -webkit-animation-name: slideDown;
    animation-name: slideDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    visibility: visible !important;
    z-index: 50;
  }

Вы увидите, что у меня есть два класса slideDown и .top-over
.slideDown работают нормально, но на .top-over он просто прыгает без эффекта скольжения, кто-нибудь знает, что мне нужно исправить, чтобы это сработало для скольжения, спасибо

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

1. translateY(-420) . Здесь отсутствует единица измерения. И вам не нужен префикс поставщика.

Ответ №1:

Несколько заметок:

  • возможно, вам захочется удалить значения с префиксом-webkit, так как в этом случае они не нужны. В тех случаях, когда они необходимы, их также не следует использовать. Как преобразование, так и анимация поддерживаются каждым современным браузером без префиксов.
  • используйте одни и те же единицы измерения в анимации — выберите либо px, либо %, а не оба.
  • вы также должны опубликовать свой html-код. Пожалуйста, сделайте это как можно более минимальным и поделитесь своим фрагментом.

Ответ №2:

 <style>
    .slider {
        overflow-y: hidden;
        max-height: 500px; /* approximate max height */
        transition-property: all;
        transition-duration: .5s;
        transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    }
        .slider.closed {
            max-height: 0;
        }
</style>

<table class="table">
    <tr>
        <td>
            <div class="slider">Some content here....</div>
        </td>
    </tr>
</table>

<%—Надеюсь, что это будет работать.Заранее спасибо—%>

Ответ №3:

 <script type="text/javascript">
    //You can use Predifined Function in JQuery
    $(function () {
        $('#trCaptcha').slideUp();
        $('#trCaptcha').slideDown();
    });
</script>

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

1. Спасибо, но мне нужен чистый css, а не Jquery

2. попробуйте добавить контекст к вашему ответу, вместо того, чтобы просто копировать вставленный код. Также возникает вопрос о том, как создать css-анимацию, если вы предлагаете другое решение, попробуйте дать четкий контекст, почему jquery в данном случае является правильным ответом.

Метки: