Can velocity.js implement CSS3 transition?

197 Views Asked by Johnpark At 03 July 2019 at 16:27

Have to run code in IE9 and have problems with CSS3 transition.

Turned eyes to velocity js for this matter.

Have no clue to transform to velocity code.

Also I tried jquery css didn't work in IE9:

$('target').velocity();

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

transition:left 0.5s ease;

Original Q&A

There are 1 best solutions below

Zhi Lv On 04 July 2019 at 05:46 BEST ANSWER

First, as we all known the transition CSS property support IE10+, you could check it from this article.

I tried jquery css didn't work in IE9:

$('target').velocity();

As for this issue, please check your JQuery selector, make sure you could find the Html element based on the element selector(instead of using class selector (such as : $(".target")) or id selector (such as: $("#target"))).

Then, you could try to use F12 developer tools to check whether the velocity reference load success, and whether there have some error.

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

From the velocity document, we could use the Easing option to set the easing types, use the Delay specify the delay option in milliseconds to insert a pause before an animation begins. More detail setting, please check the velocity document.

Here is a sample, you could refer to it:

<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 code:

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

The result as below:

Can velocity.js implement CSS3 transition?

There are 1 best solutions below

Related Questions in JQUERY

Related Questions in CSS

Related Questions in INTERNET-EXPLORER-9

Related Questions in TRANSITION

Related Questions in VELOCITY.JS

Trending Questions

Popular # Hahtags

Popular Questions