在 Vue 首次加载期间实现动画

Question

我将在应用程序模块的首次加载期间添加一个动画。
我可以添加图像，但无法为图像添加动画。
我试图包含一个 CSS 文件，但它有时不起作用。
所以我尝试添加一个 SVG 图像并将 animateTransform 插入到 SVG 元素中。
但它也不起作用。
给图片加上动画效果有什么好办法吗？

这是我的 index.html 文件的正文代码。

<body>
<noscript>
  <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app">
  <div id="loading__container">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 86.03 67.01"
      class="img-logo"
      style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100px;">
      <defs>
        ...
      </defs>
      <g class="cls-1">
        <animateTransform
          attributeName="transform"
          attributeType="XML"
          type="scale"
          additive="sum"
          keyTimes="0;0.5;1"
          values="0.5;1;0.5"
          dur="1s"
          repeatCount="indefinite"/>
          <g id="Layer_2" data-name="Layer 2">
            ...
          </g>
      </g>
    </svg>
  </div>
</div>
<!-- built files will be auto injected -->

Answer 1

我自己找到了解决方案。我使用图像元素而不是 svg 元素。这是代码

<div id="app" v-cloak>
  <div id="loading__container">
    <img src="<%= BASE_URL %>initial_img.png" alt="initial loading">
  </div>
</div>

这是我插入的样式

<style>
  @keyframes zoom-in-zoom-out {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.5, 1.5);
    }
    100% {
      transform: scale(1, 1);
    }
  }
  #loading__container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  #loading__container img{
    animation: zoom-in-zoom-out 1s ease-in infinite;
  }
</style>

在 Vue 首次加载期间实现动画

Implement animation during Vue first loading time

javascript

css

single-page-application

vue.js