webf css animation bug

Affected version

0.13.0

No same issues found.

[X] Yes, I search all issues but not found.

Steps to Reproduce

click overlay ,overlay hide in 3s second。
click button, overlay show in 3s second。

Code example

<!DOCTYPE html>
<html>
  <head>
    <style>
      .van-fade-enter-active {
        animation: 3s van-fade-in both ease-out;
      }

      .van-fade-leave-active {
        animation: 3s van-fade-out both ease-in;
      }

      @keyframes van-fade-in {
        0% {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      @keyframes van-fade-out {
        0% {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      }

      .van-overlay {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 111;
        width: 100%;
        height: 100%;
        background: gray;
      }
      #btn {
        width: 100px;
        height: 100px;
        background-color: antiquewhite;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="btn">点我啊</div>
    <div class="van-overlay" style="" id="overlay"></div>

    <script>
      var overlay = document.getElementById("overlay");
      function hide() {
        overlay.style.display = "none";
        overlay.className = "van-overlay";
      }
      function show() {
        overlay.style.display= "block";
        overlay.className = "van-overlay ";
      }
      overlay.onclick = function () {
        overlay.removeEventListener("animationend", show);
        overlay.addEventListener("animationend", hide);
        overlay.className =
          "van-overlay van-fade-leave-active";
      };
      var btn = document.getElementById("btn");
      btn.onclick = function () {
        overlay.removeEventListener("animationend", hide);
        overlay.addEventListener("animationend", show);
         overlay.style.display = 'block';
        overlay.className =
          "van-overlay van-fade-enter-active";
      };
    </script>
  </body>
</html>

Expected results

css animation normal

Actual results

css animation run error

Feb 09 '23 06:02 suyulin

fix 0.14.1

Jul 24 '23 03:07 suyulin

animation not support var

   :root{
      --van-animation-duration-base: 3s
      }
      .van-fade-enter-active {
        animation: var(--van-animation-duration-base) van-fade-in both ease-out;
      }

      .van-fade-leave-active {
        animation: var(--van-animation-duration-base) van-fade-out both ease-in;
      }

remove && CSSTime.isTime(part)) resolve this 🐞

Jul 24 '23 06:07 suyulin