css实现大屏模块动画切换效果_css 大屏线条动画

偶然间在网上看到一个小demo，效果看起来挺好的，就写篇文章记录一下，方便后续项目开发

效果如下

详细代码如下

<template>
  <div class="container">
    <div class="item-box">
      <div class="item" @click="clickChart('1')" style="transform: translate(-22.4%, -33.5%) scale(0.33)">1</div>
      <div class="item" @click="clickChart('2')" style="transform: translate(-22.4%, 0.5%) scale(0.33)">2</div>
      <div class="item" @click="clickChart('3')" style="transform: translate(-22.4%, 34.5%) scale(0.33)">3</div>
      <div class="item active" @click="clickChart('4')" style="transform: translate(43.7%, 0) scale(1)">4</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 获取页面item实例
      this.items = document.querySelectorAll(".item-box .item");
      for (let i = 0; i < this.items.length; i++) {
        this.items[i].dataset.order = i + 1;
      }
    },
    clickChart(clickIndex) {
      // 当前选中的item
      let activeItem = document.querySelector(".item-box .active");
      // 当前选中的index
      let activeIndex = activeItem.dataset.order;
      // 当前点击的item
      let clickItem = this.items[clickIndex - 1];
      // 当前点击的item与当前选中的item相同则不做任何处理
      if (activeIndex === clickIndex) {
        return;
      }
      activeItem.classList.remove("active");
      clickItem.classList.add("active");
      this._setStyle(clickItem, activeItem);
    },
    _setStyle(el1, el2) {
      // 选中和点击的item模式切换
      let transform1 = el1.style.transform;
      let transform2 = el2.style.transform;
      el1.style.transform = transform2;
      el2.style.transform = transform1;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  padding-top: 5%;
  background: url("../../../../assets/Bitmap.png");
  background-size: 100% 100%;
  .item-box {
    position: relative;
    height: 90%;
    width: 90%;
    overflow: hidden;
    margin: 0 auto 100px auto;
    box-sizing: content-box;

    .item {
      padding: 0px;
      margin: 0px;
      width: 68%;
      height: 100%;
      position: absolute;
      transition: all 0.8s;
      background: rgba(32, 32, 35, 0.2);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 48px;
      font-weight: 800;
      color: #fff;
    }

    .active {
      height: 100%;
      width: 69%;
      margin-left: 10px;
    }
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102