gpt4 book ai didi

html - Angular2 的 IE 11 预 Bootstrap 加载屏幕

转载 作者:行者123 更新时间:2023-11-28 00:59:59 25 4
gpt4 key购买 nike

我这里有问题。这适用于 Chrome,但我无法在 IE11 的 index.html 中使用任何动画。当它不想工作时,我会看到一个静态屏幕。同样在 IE 中,消息不会像它应该的那样消失。如果我将 div 放在 IE 中,什么都不会显示。

有没有人有在加载 Bootstrap 时在 index.html 中实现工作动画屏幕的好方法?我的 css 有时在 IE 11 中工作

我尝试使用的例子

<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
<meta charset="utf-8">
<title>My App Title</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="bacicon.ico">
<script type="text/javascript"></script>
<style>
.loading {
opacity: 0;
transition: opacity 0 ease-in-out 1s;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,.3);
z-index: -1;
}
/* .loading screen is visible when app is not bootstrapped yet, app-root is empty */
app-root:empty + .loading {
opacity: 1;
z-index: 100;
}

app-root:empty + .loading h1 {
position: absolute;
color: #eee;
top: 50%;
width:100%;
text-align: center;
transform: translate(0, -50%)
}
}
</style>
</head>
<body style="margin-top: 0px" >
<app-root>
</app-root>
<div class="loading">
<h1>Application is Loading<span class="one">.</span><span class="two">.</span><span class="three">.</span></h1>
</div>
</html>

我的CSS

.one {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.0s;
animation: dot 1.3s infinite;
animation-delay: 0.0s;
}

.two {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.2s;
animation: dot 1.3s infinite;
animation-delay: 0.2s;
}

.three {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.3s;
animation: dot 1.3s infinite;
animation-delay: 0.3s;
}

最佳答案

您需要使用它打开您的 polyfill.ts 文件并找到这部分代码:

/**
* Required to support Web Animations `@angular/platform-browser/animations`.
* Needed for: All but Chrome, Firefox and Opera.http://caniuse.com/#feat=web-animation **/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.

然后在 import 'web-animations-js'; 之前删除评论并运行此命令 npm install --save web-animations-js

关于html - Angular2 的 IE 11 预 Bootstrap 加载屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52724879/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com