jquery - velocity.js 可以实现 CSS3 过渡吗?

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

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

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

不知道转换为速度代码。

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

$('target').velocity();

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

transition:left 0.5s ease;

最佳答案

首先,我们都知道 transition CSS 属性支持 IE10+,你可以从 this article 查看它。 .

I tried jquery css didn't work in IE9:

$('target').velocity();

关于这个问题,请检查你的JQuery选择器,确保你能找到基于元素选择器的Html元素(而不是使用类选择器(如:$(".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;
}

结果如下:

enter image description here

关于jquery - velocity.js 可以实现 CSS3 过渡吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56874506/

相关文章:

JQuery 主体背景动画 - Chrome/Safari 中的错误

多个对话框连接/ float 问题之间的 JQueryUI 可排序

jquery - JSON 元素在调用后显示两次

javascript - div 位于页面底部?

html - 在复选框旁边 float 一个 div

javascript - 向左/右/下不同方向滑动元素

javascript - 为什么 localStorage.getItem 仅在 IE9 中失败?

javascript - IE 9 通过 Javascript 设置样式属性,不使用 JQuery 库

javascript - jQuery .each() 没有索引

asp.net - HTML 表格无法在 IE9 中正确呈现