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,46 +3,52 @@
   <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>
-      <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'">
-        <img class="img-fixed" [src]="src"/>
-      </div>
+      <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"
+         [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 *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>
-        <div *ngFor="let src of imgsrc ; index as key" class="left-small-item" (click)="select(key+videosrc.length)">
-          <img class="img-fixed" [src]="src"/>
-        </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 *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>
+      <div *ngFor="let src of imgsrc ; index as key" class="left-small-item" (click)="select(key+videosrc.length)">
+        <img class="img-fixed" [src]="src"/>
       </div>
     </div>
   </div>
+</div>
 
-  <div class="right-box col-md-4">
-    <img [src]="imgsrc[0]"/>
-    <p [innerHTML]="currentCube.description"></p>
-    <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>
-      <dt i18n>发行日期</dt>
-      <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 class="right-box col-md-4">
+  <img [src]="imgsrc[0]"/>
+  <p [innerHTML]="currentCube.description"></p>
+  <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>
+    <dt i18n>发行日期</dt>
+    <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>
 </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>-->