javascript - Angular2 应用程序未在移动设备上显示加载文本

Question

我有一个带有使用 SystemJS 的 typescript 的 angular2 应用程序；我使用了以下 seed app .

在桌面上时，您可以在标签之间看到加载文本(例如 Loading...)。

在我的索引页面上，我有一个小的加载 div 来显示我的应用程序在首次加载时速度很慢。

但是这个 div 永远不会在移动设备上显示。

索引代码

<app>
    <header>
        <nav>
            <div class="container col-sm-10 col-sm-offset-1">                 
                  <div class="navbar-header">      
                    <a class="navbar-brand col-xs-3 col-xs-offset-1">
                      <img src="./assets/logo.png" />
                    </a>
                  </div> 
            </div> 
         </nav>
    </header>

    <div class="bounceInDown animated">  
        <div class="loading-wrapper animated fadeIn">      
            <p class="loading-text">Hold on!<br />We're unpacking...</p>
            <div class="loading-icon preload"></div>
        </div>
    </div>
</app>

如果您需要更多代码示例，请告诉我。

我基本上希望 app 标签内的这个 div 显示在移动设备上；我也愿意接受任何 jQuery 移动技巧。

这似乎是关键帧。你能告诉我哪里出了问题吗？

CSS 和关键帧代码

 .loading-icon {
        animation: scaleout 1.0s infinite ease-in-out;
        background-color: #ffffff;
        border-radius: 100%;
        display: inline-block;
        height: 40px;
        margin: 100px auto;
        -webkit-animation: scaleout 1.0s infinite ease-in-out;
        width: 40px;
    }
} 

@-webkit-keyframes scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}

Answer 1

Safari 对关键帧动画很挑剔，如果没有任何显示，请尝试删除 bounceInDown 类，然后尝试一项一项地重新添加动画功能，看看有什么问题。

编辑:首先尝试将您的 css 中的 bounceInDown 类移动到@-webkit-keyframes bounceInDown