Question

我有一个使用SystemJS的typescript应用程序;我使用了以下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>

如果您需要更多代码示例，请与我们联系。

我基本上希望div标记内的app显示在移动设备上;我也对任何jQuery移动技巧持开放态度。

似乎是keyframe。你能让我知道什么是错的吗？

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 -class移动到之前 @ -webkit-keyframes bounceInDown

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

1 个答案: