CSS3 transition 属性 实现地图切换

话不多说，直接上图，我查看了百度地图的然后试着做了一个具有收缩功能的

<template>
  <div id="mapType">
    <div class="mapTypeCard vectorType">
      <span>地图</span>
    </div>
    <div class="mapTypeCard imgType">
      <span>影像</span>
    </div>
    <div class="mapTypeCard terType">
      <span>地形</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {},
  mounted() {}
};
</script>
<style scoped>
#mapType {
  width: 106px;
  height: 70px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 2;
  cursor: pointer;
  border-radius: 5px;
  transition: width 0.8s, height 0.8s;
  -moz-transition: width 0.8s, height 0.8s, -moz-transform 0.8s; /* Firefox 4 */
  -webkit-transition: width 0.8s, height 0.8s, -webkit-transform 0.8s; /* Safari and Chrome */
  -o-transition: width 0.8s, height 0.8s, -o-transform 0.8s; /* Opera */
}
#mapType:hover {
  width: 288px;
  background: rgba(255, 255, 255, 0.3);
}
#mapType .mapTypeCard {
  position: absolute;
  top: 5px;
  width: 86px;
  height: 60px;
  border-radius: 5px;
  border: solid 1px black;
}
#mapType .mapTypeCard span {
  width: 36px;
  height: 16px;
  position: absolute;
  bottom: 1px;
  right: 1px;
  display: inline-block;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: #fff;
  background: #888f88;
  opacity: 0.8;
}
#mapType .vectorType {
  background-color: pink;
  z-index: 3;
  right: 15px;
  transition: right 0.8s;
  -moz-transition: right 0.8s; /* Firefox 4 */
  -webkit-transition: right 0.8s; /* Safari and Chrome */
  -o-transition: right 0.8s; /* Opera */
}
#mapType .imgType {
  z-index: 2;
  right: 10px;
  background-color: rgb(118, 118, 201);
  transition: right 0.8s;
  -moz-transition: right 0.8s; /* Firefox 4 */
  -webkit-transition: right 0.8s; /* Safari and Chrome */
  -o-transition: right 0.8s; /* Opera */
}
#mapType .terType {
  z-index: 1;
  right: 5px;
  background-color: greenyellow;
  transition: right 0.8s;
  -moz-transition: right 0.8s; /* Firefox 4 */
  -webkit-transition: right 0.8s; /* Safari and Chrome */
  -o-transition: right 0.8s; /* Opera */
  transition: right 0.8s;
  -moz-transition: right 0.8s; /* Firefox 4 */
  -webkit-transition: right 0.8s; /* Safari 和 Chrome */
  -o-transition: right 0.8s; /* Opera */
}
#mapType:hover .vectorType {
  right: 197px;
}
#mapType:hover .imgType {
  right: 101px;
}
#mapType:hover .terType {
  right: 5px;
}
#mapType .vectorType:hover,
#mapType .active {
  border: solid 1px #31a5f7;
}
#mapType .imgType:hover {
  border: solid 1px #31a5f7;
}
#mapType .terType:hover {
  border: solid 1px #31a5f7;
}
#mapType .vectorType:hover span,
#mapType .active span {
  background: #31a5f7;
}
#mapType .imgType:hover span {
  background: #31a5f7;
}
#mapType .terType:hover span {
  background: #31a5f7;
}
</style>