我将在应用程序的模块第一次加载时添加动画。
我可以添加图片，但不能添加动画。
我试图包含一个CSS文件，但它有时不工作。
所以我尝试添加SVG图像并将animateTransform插入SVG元素。
但它也不起作用。
有什么好主意添加一个动画的图像?
这是我的body代码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 -->
我自己找到了解决办法。我使用了image元素而不是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>