feat:大屏入场动画

ZhangXianQiang

2024-03-29 8513bbe37348afba3746a355c9c4ce7c86c0a57c

feat:大屏入场动画

 src/views/screen/components/screen-examine/components/examine-chart.vue

@@ -59,7 +59,7 @@

    .hola-item {
      flex-shrink: 0;
      width: 220px;
      width: 180px;
      height: 180px;
    }
  }

 src/views/screen/components/screen-table/index.vue

@@ -99,7 +99,7 @@
.table-container {
  width: 100%;
  // flex: 1;
  height: 380px;
  height: 350px;
  position: relative;
  background: rgba(67, 102, 155, 0.3);
  border: 1px solid rgba(47, 91, 157, 0.8);

 src/views/screen/components/screen-wrapper/index.vue

@@ -6,18 +6,18 @@
    </div>
    <div class="wrapper-content">
      <div class="left-container wrapper">
        <screen-face></screen-face>
        <screen-car></screen-car>
        <screen-video></screen-video>
        <screen-face class="animate-enter-x enter-left"></screen-face>
        <screen-car class="animate-enter-x enter-left animate-delay-1"></screen-car>
        <screen-video class="animate-enter-x enter-left animate-delay-2"></screen-video>
      </div>
      <div class="center-container center-wrapper">
        <screen-map></screen-map>
        <screen-table></screen-table>
        <screen-table class="animate-enter-y enter-top"></screen-table>
        <!-- <screen-detection></screen-detection> -->

      </div>
      <div class="right-container wrapper">
        <screen-examine></screen-examine>
        <screen-examine class="animate-enter-x enter-right"></screen-examine>
      </div>
    </div>
  </div>
@@ -56,6 +56,7 @@
  right: 20px;
  top: 40px;
}

.wrapper-container {
  width: 100%;
  height: 100%;
@@ -78,7 +79,7 @@
}

.wrapper {
  width: 25%;
  width: 20%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;
@@ -94,8 +95,9 @@
    padding-right: 0;
  }
}

.center-wrapper {
  width: 50%;
  width: 60%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;
@@ -103,4 +105,47 @@
  flex-direction: column;
  justify-content: space-between;
}
.animate-enter-x {
  animation: enter-x 0.4s ease forwards;
}
.animate-enter-y {
  animation: enter-y 0.4s ease forwards;
}
.enter-left {
  transform: translateX(-100px);
  opacity: 0;
}
.enter-right {
  transform: translateX(100px);
  opacity: 0;
}
.enter-top {
  transform: translateY(100px);
  opacity: 0;
}
.animate-delay-1 {
  animation-delay: 0.1s;
}

.animate-delay-2 {
  animation-delay: 0.3s;
}

.animate-delay-3 {
  animation-delay: 0.5s;
}

@keyframes enter-x {
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes enter-y {
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>