Question

我在这里遇到问题。这可以在Chrome上使用，但是我无法在IE11的index.html中使用任何动画。当我感觉无法正常工作时，我会得到一个静态屏幕。同样在IE中，该消息不会消失，应该消失。如果我将div放在IE中什么都没有显示。

有人在引导程序加载时在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;
}

Answer 1

您需要使用它打开您的 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`.

然后在 导入“ web-animations-js”之前删除评论； 并运行此命令 npm install --save web-animations-js

Angular2的IE 11 Pre-Bootstrap加载屏幕

1 个答案: