Search code examples
jquerycssinternet-explorer-9transitionvelocity.js

Can velocity.js implement CSS3 transition?

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;

Solution

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

    enter image description here