style

app/cube-description/cube-description.component.css

@@ -111,6 +111,26 @@ img {
   box-sizing: initial;
 }
 
+.appear{
+  animation:appear 0.5s;
+  opacity: 1; z-index: 100
+}
+
+.disappear{
+  animation:disappear 0.5s;
+  opacity: 0; z-index: 0
+}
+
+@keyframes appear {
+  from{ opacity: 0; z-index: 0}
+  to{opacity: 1; z-index: 100}
+}
+
+@keyframes disappear {
+  from{ opacity: 1; z-index: 100}
+  to{opacity: 0; z-index: 0}
+}
+
 /*#left {*/
 /*font-size: 14px;*/
 /*margin-right: 8px;*/

app/cube-description/cube-description.component.html

@@ -3,17 +3,21 @@
   <div class="left-box col-md-8">
     <div class="left-big-item-box" (mouseout)="carouselUnlock()" (mouseover)="carouselLock_f()">
       <div class="make-div-16-9"></div>
-      <div class="left-big-item" [style.opacity]="selectId<videosrc.length ? 1:0" [style.display]="selectId<videosrc.length? 'block':'none'" *ngIf="videosrc.length">
-        <video controls="" name="video" (ended)="nextvedio(selectId)" autoplay="true" [src]="videosrc_now" type="video/webm"></video>
+      <div class="left-big-item"
+           [ngClass]="{'disappear':!(selectId<videosrc.length), 'appear':(selectId<videosrc.length) }">
+      <video controls="" name="video" (ended)="nextvedio(selectId)" autoplay="true" [src]="videosrc_now"
+             type="video/webm"></video>
     </div>
-      <div *ngFor="let src of imgsrc ; index as key" class="left-big-item" [style.opacity]="divOpacity[key+videosrc.length]" [style.display]="divOpacity[key+videosrc.length]? 'block':'none'">
+    <div *ngFor="let src of imgsrc ; index as key" class="left-big-item"
+         [ngClass]="{'disappear':!divOpacity[key+videosrc.length], 'appear':!!divOpacity[key+videosrc.length]}">
       <img class="img-fixed" [src]="src"/>
     </div>
   </div>
 
   <div class="left-small-item-box-overflow">
     <div class="left-small-item-box">
-        <div class="select-rectangle" [style.left]="(2+120*selectId)+'px'" (mouseout)="carouselUnlock()" (mouseover)="carouselLock_f()"></div>
+      <div class="select-rectangle" [style.left]="(2+120*selectId)+'px'" (mouseout)="carouselUnlock()"
+           (mouseover)="carouselLock_f()"></div>
       <div *ngFor="let src of videosrc ; index as key" class="left-small-item" (click)="select(key);">
         <img class="img-fixed" [src]="src[1]"/> <i class="fa fa-play-circle icon_play" aria-hidden="true"></i>
       </div>
@@ -22,9 +26,9 @@
       </div>
     </div>
   </div>
-  </div>
+</div>
 
-  <div class="right-box col-md-4">
+<div class="right-box col-md-4">
   <img [src]="imgsrc[0]"/>
   <p [innerHTML]="currentCube.description"></p>
   <dl>
@@ -39,10 +43,12 @@
     <dd>{{currentCube.released_at | date:'mediumDate'}}</dd>
   </dl>
   <div id="tags" *ngIf="currentCube.tags">
-      <div i18n *ngFor="let tag of currentCube.tags" class="btn btn-sm btn-danger tag">{tag, select, installed {已安装} test {测试} recommend {推荐} mysterious {迷之物体} touhou {东方 Project} touhou_pc98 {东方旧作} runtime_installed{已安装的运行库} }</div>
+    <div i18n *ngFor="let tag of currentCube.tags" class="btn btn-sm btn-danger tag">{tag, select, installed {已安装}
+      test {测试} recommend {推荐} mysterious {迷之物体} touhou {东方 Project} touhou_pc98 {东方旧作} runtime_installed{已安装的运行库} }
     </div>
   </div>
 </div>
+</div>
 
 <!--<div class="panel" id="left">--><!--<p [innerHTML]="currentCube.description"></p>--><!--<div id="tags" *ngIf="currentCube.tags">--><!--<div i18n *ngFor="let tag of currentCube.tags" class="btn btn-sm btn-danger tag">{tag, select, installed {已安装} test {测试} recommend {推荐} mysterious {迷之物体} touhou {东方 Project} touhou_pc98 {东方旧作} runtime_installed{已安装的运行库} }</div>--><!--</div>--><!--</div>--><!--<div class="panel" id="right">--><!--<dl>--><!--<dt i18n>开发</dt>--><!--<dd>--><!--<div *ngFor="let developer of currentCube.developers">--><!--<a *ngIf="developer.url" target="_blank" [href]="developer.url">{{developer.name}}</a>--><!--<span *ngIf="!developer.url">{{developer.name}}</span>--><!--</div>--><!--</dd>-->