页面加载发生奇怪的过渡

Question

我正在用angularjs整理时间轴，并且在页面加载时遇到了一个奇怪的CSS过渡问题。 CSS过渡是悬停时的比例转换，但也会发生两个气泡在页面加载时的位置：

我的HTML和CSS如下：

<div id="timeline-wrap">
  <!--<div id="timeline">
<div id="today_width" style="width:{{c.data.today_width}}"></div>
</div>-->

  <!-- bootstrap progress bar -->
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="{{c.data.today_width}}" aria-valuemin="0" aria-valuemax="100" style="width:{{c.data.today_width}}">
      <!--{{c.data.today_width}}-->
    </div>
  </div>

  <!-- This is the individual marker-->
  <div class="marker timeline-icon" ng-if="c.data.rpm_case.performance_cycle_start" data-toggle="tooltip" data-placement="top" title="{{c.data.rpm_case.performance_cycle_start | date:fullDate}}">
    <a href="javascript:void(0)">
      <i class="far fa-play-circle"></i>
    </a>
  </div>

  <div ng-class="{'marker': event.milestone_trigger!='recurring', 'recurring-marker': event.milestone_trigger=='recurring'}" ng-repeat="event in c.data.rpm_case.milestones | orderBy : 'milestone_start' track by $index" style="left: {{event.milestone_percentage_dur}}">
    <a href="javascript:void(0)" ng-click="showDetails = ! showDetails">
      <i class={{event.milestone_icon}} ng-if="event.milestone_trigger!='recurring'"></i>
    </a>
    <div class="timeline-panel show" ng-show="showDetails">
      <div class="timeline-heading">
        <h4 class="timeline-title">{{event.milestone_name}}</h4>
        <p><small class="text-muted">
          <i class="glyphicon glyphicon-time"></i> Milestone Start: {{event.milestone_start | date : fullDate }}
          </small>
        </p>
      </div>
      <ul class="timeline-body">
        <li ng-repeat="task in event.tasks track by $index">
          <p>{{task.short_description}}</p>
          <p ng-if="task.task_state!='3'"><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i> Due Date: {{task.task_due_date}}</small></p>
          <p ng-if="task.task_state=='3'"><small class="text-muted"><i class="glyphicon glyphicon-ok-sign"></i> Completed {{task.updated | date: fullDate}}</small></p>
        </li>
      </ul>
    </div>
  </div>
  <!-- / marker -->

  <div class="marker mlast timeline-icon" ng-if="c.data.rpm_case.performance_cycle_end" data-toggle="tooltip" data-placement="top" title="{{c.data.rpm_case.performance_cycle_end | date:fullDate}}">
    <a href="javascript:void(0)">
      <i class="far fa-play-circle"></i>
    </a>
  </div>
</div>

.show.ng-hide,
.hide.ng-hide{
  animation-name:fadeOut;
  animation-duration: .5s;
}

.show{
  animation-name:fadeIn;
  animation-duration: .5s;
}

#timeline-wrap{
  margin:20% 0;
  top:100;
  position:relative;
}

.progress {
  background-color:$color-light;
}

.marker, .recurring-marker{
  z-index:1000;
  color: #fff;
  text-align: center;
  position: absolute;
  margin-left: -25px;
  border: 2px solid black;
  background-color: white;
  border-radius: 50%;
  -webkit-transition: all 3s;
  -moz-transition: all 3s;
  -ms-transition: all 3s;
  -o-transition: all 3s;
  transition: all 3s;
}

.marker {
  height: 50px;
  width: 50px;
  top: -15px;
}

.recurring-marker {
  height: 20px;
  width: 20px;
  top: 0;
}

.marker i {
  font-size: 1.4em;
  line-height: 48px;
}

.marker:hover, .recurring-marker:hover{
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

.mlast{
  left:100%
}

.timeline-panel {
  margin-top: 20%;
  min-width: 200px;
  border: 1px solid black;
  border-radius:2px;
  position:relative;
  text-align:left;
  padding:10px;
  float:left;
  color: black;
}

.timeline-panel:after {
  content:'';
  position:absolute;
  top: -27px;
  width:0;
  height:0;
  border:12px solid transparent;
  border-bottom: 15px solid;
}

我怀疑这是因为ng-class，但是不知道为什么会导致这种情况。当我取出CSS的过渡部分时，这两个气泡的奇怪淡入停止了，但是我们想要保持的悬停过渡也停止了。

有关如何解决此问题的任何建议？