Question

我正在使用ng-cloak在我的应用加载时显示启动页面。我希望启动页面显示使用css实现的svg动画。动画在ng-cloak之外工作得很好，svg本身会在删除css动画规则的情况下在ng-cloak中显示，但是，我无法使用ng-cloak中的css动画显示svg。我无法弄清楚原因。

CSS

.path {
stroke-dasharray: 4000;
stroke-dashoffset: 4000;
animation: dash 7s linear alternate infinite;
}

@keyframes dash {
from {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}

.triangle {
-webkit-animation: fadein 7s; /* Safari, Chrome and Opera > 12.1 */
   -moz-animation: fadein 7s; /* Firefox < 16 */
    -ms-animation: fadein 7s; /* Internet Explorer */
     -o-animation: fadein 7s; /* Opera < 12.1 */
        animation: fadein 7s;
 }
 @keyframes fadein {
 from { opacity: 0; }
 to   { opacity: 1; }
 }
 /* Firefox < 16 */
 @-moz-keyframes fadein {
 from { opacity: 0; }
 to   { opacity: 1; }
 }
 /* Safari, Chrome and Opera > 12.1 */
 @-webkit-keyframes fadein {
 from { opacity: 0; }
 to   { opacity: 1; }
 }
 /* Internet Explorer */
 @-ms-keyframes fadein {
 from { opacity: 0; }
 to   { opacity: 1; }
 }
 /* Opera < 12.1 */
 @-o-keyframes fadein {
 from { opacity: 0; }
 to   { opacity: 1; }
 }
 [ng-cloak].splash {
 display: block !important;
 }
 .splash {
display: none;
}

HTML

<body ng-app="myApp">
<div class="splash" ng-cloak="">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="1080px" height="1920px" viewBox="0 0 1080 1920" enable-     background="new 0 0 1080 1920" xml:space="preserve">
    <circle class="path" fill="none" stroke="#b0f7ff" stroke-width="30"     stroke-miterlimit="10" cx="540" cy="959.999" r="508.824"/>
    <polygon class="triangle" fill="#ffb9b0" points="112.49,1206.067     540,465.599 967.51,1206.067" />
  </svg>
</div> 
<div id="carousel"  ng-controller="Catalog" ng-cloak="">  
<ul>
  <li class="pane1">
    <div class="bg" ng-repeat="book in books" >
       <div ng-show=" book.doc.date | mydate" >
          <div class="date">{{book.doc.date}}</div>
          <div class="title">{{book.doc.title}}</div>
          <div class="quote">{{book.doc.quote}}</div>
          <div class="attribution">-{{book.doc.attribution}}</div>
          <div class="textt">{{book.doc.text}}</div>
      <div style="height:10px"></div>      
       </div>
      </div>  
  </li>

ng-cloak splash page svg css动画无效

0 个答案: