velocity.js 可以实现 CSS3 过渡吗？答案

【问题标题】：Can velocity.js implement CSS3 transition?velocity.js 可以实现 CSS3 过渡吗？
【发布时间】：2019-11-14 09:39:48
【问题描述】：

必须在 IE9 中运行代码并且遇到 CSS3 转换问题。

为了这件事把目光转向velocity js。

不知道如何转换为速度代码。

我也试过 jquery css 在 IE9 中不起作用：

$('target').velocity();

我怎样才能使这个过渡 css3 适应速度参数？

过渡：左 0.5s 缓动；

【问题讨论】：

标签： jquery css internet-explorer-9 transition velocity.js

【解决方案1】：

首先，大家都知道transition CSS属性支持IE10+，可以到this article查看。

我试过 jquery css 在 IE9 中不起作用：

$('target').velocity();

关于这个问题，请检查您的 JQuery 选择器，确保您可以根据元素选择器（而不是使用类选择器（例如：$(".target")）或 id 选择器（例如如：$("#target")))。

然后，您可以尝试使用F12开发工具检查速度参考加载是否成功，是否有错误。

我怎样才能使这个过渡 css3 适应速度参数 ?

从velocity document，我们可以使用 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;
}

结果如下：

【讨论】：