Javascript ng斗篷启动页svg css动画不工作_Javascript_Html_Css_Angularjs_Svg

Javascript ng斗篷启动页svg css动画不工作

javascript html css angularjs svg

Javascript ng斗篷启动页svg css动画不工作,javascript,html,css,angularjs,svg,Javascript,Html,Css,Angularjs,Svg,当我的应用程序加载时，我正在使用ng斗篷显示启动页。我希望启动页面显示一个用css实现的svg动画。动画在ng斗篷外部工作良好，svg本身将在ng斗篷内部显示良好，css动画规则已删除，但是，我无法让svg在ng斗篷内部显示css动画。我不明白为什么 css .path { stroke-dasharray: 4000; stroke-dashoffset: 4000; animation: dash 7s linear alternate infinite; } @keyframes das

当我的应用程序加载时，我正在使用ng斗篷显示启动页。我希望启动页面显示一个用css实现的svg动画。动画在ng斗篷外部工作良好，svg本身将在ng斗篷内部显示良好，css动画规则已删除，但是，我无法让svg在ng斗篷内部显示css动画。我不明白为什么

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;
}

.path{
笔划阵列：4000；
行程偏移：4000；
动画：破折号7s线性交替无限；
}
@关键帧破折号{
从{
行程偏移：4000；
}
到{
笔划偏移：0；
}
}
.三角形{
-webkit动画：fadein 7s；/*Safari、Chrome和Opera>12.1*/
-moz动画：fadein 7s；/*Firefox<16*/
-ms动画：fadein 7s；/*Internet Explorer*/
-o-动画：fadein 7s；/*Opera<12.1*/
动画：Fadein7s；
}
@关键帧淡入淡出{
从{opacity:0；}
到{opacity:1；}
}
/*Firefox<16*/
@-moz关键帧fadein{
从{opacity:0；}
到{opacity:1；}
}
/*Safari、Chrome和Opera>12.1*/
@-webkit关键帧fadein{
从{opacity:0；}
到{opacity:1；}
}
/*Internet Explorer*/
@-ms关键帧fadein{
从{opacity:0；}
到{opacity:1；}
}
/*歌剧<12.1*/
@-o-关键帧fadein{
从{opacity:0；}
到{opacity:1；}
}
[ng斗篷]。飞溅{
显示：块！重要；
}
.飞溅{
显示：无；
}

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>




{{book.doc.date}
{{book.doc.title}
{{book.doc.quote}
-{{book.doc.attribute}
{{book.doc.text}