velocity.js 可以实现 CSS3 转换吗？

Question

必须在 IE9 中运行编写代码并且 CSS3 转换有问题。

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

不知道转换成速度代码。

我也试过 jquery css 在 IE9 中不工作:

$('target').velocity();

我怎样才能使这种转变 css3 适应速度参数？

transition:left 0.5s ease;

Answer 1

首先，众所周知过渡CSS属性支持IE10+，你可以从this article.

查看

I tried jquery css didn't work in IE9:

$('target').velocity();

至于这个问题，请检查你的 JQuery 选择器，确保你可以根据元素选择器找到 Html 元素（而不是使用 class 选择器（例如: $(".target")) 或id选择器（如：$("#target"))).

那你可以尝试使用F12开发者工具查看速度参考加载是否成功，是否有错误。

How could I make this transition css3 to fit in to velocity parameter ?

从velocity document开始，我们可以使用Easing选项来设置缓动类型，使用Delay指定延迟选项以毫秒为单位在动画开始之前插入暂停。更详细的设置，请查看velocity文档

这里有一个例子，你可以参考一下：

<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;
}

结果如下：

velocity.js 可以实现 CSS3 转换吗？

Can velocity.js implement CSS3 transition?

css

jquery

transition

internet-explorer-9

velocity.js