zgyw-ui.git - Gitblit

parent: b8b9c902 | 补丁 | 提交 | ignore whitespace

ZhangXianQiang

2024-04-01 bdb0d3a419df2445e59de2e6f6aea62497ad9e8f

fix:更改动画顺序

3个文件已修改

	public/index.html	52 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/screen/components/screen-map-three/index.vue	2 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/screen/components/screen-wrapper/index.vue	41 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 public/index.html

@@ -1,21 +1,27 @@
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
    <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
      <style>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= webpackConfig.name %>
  </title>
  <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
  <style>
    html,
    body,
    #app {
      height: 100%;
      margin: 0px;
      padding: 0px;
      overflow: hidden;

    }

    .chromeframe {
      margin: 0.2em 0;
      background: #ccc;
@@ -92,6 +98,7 @@
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
@@ -105,6 +112,7 @@
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
@@ -194,15 +202,17 @@
      opacity: 0.5;
    }
  </style>
  </head>
  <body>
    <div id="app">
        <div id="loader-wrapper">
            <div id="loader"></div>
            <div class="loader-section section-left"></div>
            <div class="loader-section section-right"></div>
            <div class="load_title">正在加载系统资源，请耐心等待</div>
        </div>
    </div>
  </body>
</html>
</head>

<body>
  <div id="app">
    <div id="loader-wrapper">
      <div id="loader"></div>
      <div class="loader-section section-left"></div>
      <div class="loader-section section-right"></div>
      <div class="load_title">正在加载系统资源，请耐心等待</div>
    </div>
  </div>
</body>

</html>

 src/views/screen/components/screen-map-three/index.vue

@@ -20,6 +20,8 @@
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  .world {
    width: 100%;

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

@@ -7,19 +7,19 @@
    <div class="wrapper-content">
      <screen-map-three></screen-map-three>
      <div class="left-container wrapper">
        <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>
        <screen-face class="enter-left" :class="{ 'animate-enter-x': isEnd }"></screen-face>
        <screen-car class="enter-left animate-delay-1" :class="{ 'animate-enter-x': isEnd }"></screen-car>
        <screen-video class="enter-left animate-delay-2" :class="{ 'animate-enter-x': isEnd }"></screen-video>
      </div>
      <div class="center-container center-wrapper">
        <!-- <screen-map></screen-map> -->
        <screen-map-cover></screen-map-cover>
        <screen-table class="animate-enter-y enter-top"></screen-table>
        <screen-table class="enter-top" :class="{ 'animate-enter-y': isEnd }"></screen-table>
        <!-- <screen-detection></screen-detection> -->

      </div>
      <div class="right-container wrapper">
        <screen-examine class="animate-enter-x enter-right"></screen-examine>
        <screen-examine class="enter-right" :class="{ 'animate-enter-x': isEnd }"></screen-examine>
      </div>
    </div>
  </div>
@@ -49,10 +49,29 @@
    ScreenMapCover,
    ScreenMapThree
  },
  data() {
    return {
      isEnd: false
    }
  },
  methods: {
    returnPath() {
      this.$router.push('/index');
    },
    checkAnimationEnd(event) {
      if (this.isEnd) return;
      if (event.propertyName === 'transform') {
        this.isEnd = true;
      }
    }
  },
  mounted() {
    const container = document.querySelector('.screen-wrapper');
    container.addEventListener('transitionend', this.checkAnimationEnd);
  },
  destroyed() {
    const container = document.querySelector('.screen-wrapper');
    container.removeEventListener('transitionend', this.checkAnimationEnd);
  }
}
</script>
@@ -149,14 +168,22 @@
}

@keyframes enter-x {
  100% {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes enter-y {
  100% {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

			@@ -1,21 +1,27 @@
			<!DOCTYPE html>
			<html>
			<head>
			<meta charset="utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			<meta name="renderer" content="webkit">
			<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
			<link rel="icon" href="<%= BASE_URL %>favicon.ico">
			<title><%= webpackConfig.name %></title>
			<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
			<style>

			<head>
			<meta charset="utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			<meta name="renderer" content="webkit">
			<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
			<link rel="icon" href="<%= BASE_URL %>favicon.ico">
			<title>
			<%= webpackConfig.name %>
			</title>
			<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
			<style>
			html,
			body,
			#app {
			height: 100%;
			margin: 0px;
			padding: 0px;
			overflow: hidden;

			}

			.chromeframe {
			margin: 0.2em 0;
			background: #ccc;
			@@ -92,6 +98,7 @@
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
			}

			100% {
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			@@ -105,6 +112,7 @@
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
			}

			100% {
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			@@ -194,15 +202,17 @@
			opacity: 0.5;
			}
			</style>
			</head>
			<body>
			<div id="app">
			<div id="loader-wrapper">
			<div id="loader"></div>
			<div class="loader-section section-left"></div>
			<div class="loader-section section-right"></div>
			<div class="load_title">正在加载系统资源，请耐心等待</div>
			</div>
			</div>
			</body>
			</html>
			</head>

			<body>
			<div id="app">
			<div id="loader-wrapper">
			<div id="loader"></div>
			<div class="loader-section section-left"></div>
			<div class="loader-section section-right"></div>
			<div class="load_title">正在加载系统资源，请耐心等待</div>
			</div>
			</div>
			</body>

			</html>

			@@ -20,6 +20,8 @@
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;
			.world {
			width: 100%;

			@@ -7,19 +7,19 @@
			<div class="wrapper-content">
			<screen-map-three></screen-map-three>
			<div class="left-container wrapper">
			<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>
			<screen-face class="enter-left" :class="{ 'animate-enter-x': isEnd }"></screen-face>
			<screen-car class="enter-left animate-delay-1" :class="{ 'animate-enter-x': isEnd }"></screen-car>
			<screen-video class="enter-left animate-delay-2" :class="{ 'animate-enter-x': isEnd }"></screen-video>
			</div>
			<div class="center-container center-wrapper">
			<!-- <screen-map></screen-map> -->
			<screen-map-cover></screen-map-cover>
			<screen-table class="animate-enter-y enter-top"></screen-table>
			<screen-table class="enter-top" :class="{ 'animate-enter-y': isEnd }"></screen-table>
			<!-- <screen-detection></screen-detection> -->

			</div>
			<div class="right-container wrapper">
			<screen-examine class="animate-enter-x enter-right"></screen-examine>
			<screen-examine class="enter-right" :class="{ 'animate-enter-x': isEnd }"></screen-examine>
			</div>
			</div>
			</div>
			@@ -49,10 +49,29 @@
			ScreenMapCover,
			ScreenMapThree
			},
			data() {
			return {
			isEnd: false
			}
			},
			methods: {
			returnPath() {
			this.$router.push('/index');
			},
			checkAnimationEnd(event) {
			if (this.isEnd) return;
			if (event.propertyName === 'transform') {
			this.isEnd = true;
			}
			}
			},
			mounted() {
			const container = document.querySelector('.screen-wrapper');
			container.addEventListener('transitionend', this.checkAnimationEnd);
			},
			destroyed() {
			const container = document.querySelector('.screen-wrapper');
			container.removeEventListener('transitionend', this.checkAnimationEnd);
			}
			}
			</script>
			@@ -149,14 +168,22 @@
			}

			@keyframes enter-x {
			100% {
			from {
			opacity: 0;
			}

			to {
			opacity: 1;
			transform: translateX(0);
			}
			}

			@keyframes enter-y {
			100% {
			from {
			opacity: 0;
			}

			to {
			opacity: 1;
			transform: translateY(0);
			}