Может speed.js реализовать переход CSS3? - PullRequest
Новая
       27

Может speed.js реализовать переход CSS3?

0 голосов
/ 03 июля 2019

Приходится запускать код в IE9 и иметь проблемы с переходом CSS3.

В этом отношении обратился взгляд на скорость js.

Не имею понятия, как преобразовать код скорости.

Также я попробовал, чтобы jquery css не работал в IE9: 

$('target').velocity();

Как я могу сделать этот переход css3, чтобы соответствовать параметру скорости?

переход: слева 0,5легкость;

1 Ответ

0 голосов
/ 04 июля 2019

Во-первых, поскольку мы все знаем, что свойство CSS перехода поддерживает IE10 +, вы можете проверить его из этой статьи .

Я пытался jquery css не работал в IE9:

$ ('target'). Speed ​​();

Что касается этой проблемы, пожалуйста, проверьте селектор JQuery, убедитесь, что вы можете найти элемент Html на основе селектора элемента(вместо того, чтобы использовать селектор класса (такой как: $ (". target")) или селектор идентификатора (такой как: $ ("# target"))).

Затем, вы можете попробовать использовать F12 developerинструменты для проверки успешности загрузки эталонной скорости и наличия какой-либо ошибки.

Как я могу сделать этот переход css3, чтобы соответствовать параметру скорости?

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

Вот пример, вы можете обратиться к нему: 

<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="Scripts/velocity/style.css" rel="stylesheet" />
</head>
<body>
    <p>
        Refresh this page to re-run the demo.
    </p>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
    </div>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js'></script>
    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2/velocity.ui.min.js'></script>
    <script type="text/javascript">
        $("div").velocity({ width: "500px" }, { easing: "ease", delay: 500, duration: 1500 });
    </script>
</body>

Код CSS: 

body {
  font-family: "Helvetica Neue", Helvetica;
  width: 90%;
  font-weight: 200;
  letter-spacing: 1px;
  margin: 25px auto 0 auto;
  background: rgb(234, 235, 235);
  color: rgb(25, 25, 25);
}

div, p {
  margin: 0 auto;
}

p {
  color: rgb(125, 125, 125);
  font-size: 0.85rem;
  text-align: center;
  margin-bottom: 17px;
}

div {
  width: 35%;
  overflow: hidden;
}

Результаткак показано ниже:

enter image description here

...