Vue 使用CSS3 实现简单过渡动画

矫情吗；* 2023-06-04 08:56 39阅读 0赞

> 实现点击缩放、移动，鼠标点击移动完成旋转

<template>
      <div id="import-template" @mouseup.self="mouseUp">
        <ul class="box" @click="reset" @mousedown.self="mouseDown($event)" @mousemove="mouseMove($event)" @mouseup.self="mouseUp" ref="box">
          <li v-for="item in list" :key="item.id" :id="item.name" @click.stop="select(item.name, item.href)" :ref="item.name" >
            <img :src="item.url" alt="">
          </li>
        </ul>
      </div>
    </template>
    
    <script>
      export default { 
        name: 'Index',
        data() { 
          return { 
           list: [
             { id: 1, url: require('@/assets/images/1.jpg'), href: 'https://www.baidu.com', name: 'first'},
             { id: 2, url: require('@/assets/images/2.jpg'), href: 'https://www.jd.com', name: 'second'},
             { id: 3, url: require('@/assets/images/3.jpg'), href: 'https://www.taobao.com', name: 'third'},
             { id: 4, url: require('@/assets/images/4.jpg'), href: 'https://www.163.com', name: 'fourth'},
             { id: 5, url: require('@/assets/images/5.jpg'), href: 'https://www.sina.com.cn', name: 'fifth'},
           ],
           flag: false,
           distance: ``,
          }
        },
        mounted() { 
          delete sessionStorage.currentName
        },
        methods: { 
          //鼠标按下
          mouseDown(e) { 
            // let cX, cY, x, y
            // cX = e.clientX
            // cY = e.clientY
            // x = ( e.clientX / window.innerWidth ) * 2 - 1
            // y = - ( e.clientY / window.innerHeight ) * 2 + 1
            // console.log(cX, cY)
            // console.log(x, y)
            this.flag = true
            this.distance = e.clientX
          },
          //鼠标移动
          mouseMove(e) { 
            if (this.flag) { 
              let angle = e.clientX - this.distance
              if (angle >= 30 || angle <= -30) { 
                this.mouseUp()
              } else { 
                this.$refs.box.style.transition = `all 3s`
                this.$refs.box.style.transform = `rotateY(${ -angle}deg)`
              }
            }
          },
          //鼠标抬起
          mouseUp() { 
            this.flag = false
            this.distance = ``
          },
          //选中
          select(name, href) { 
            this.$refs.box.style.transform = ``
            if (sessionStorage.currentName) { 
              if (name != sessionStorage.currentName) { 
                this.reset()
              } else { 
                window.location.href = href
              }
            }
            sessionStorage.currentName = name
            this.$refs[name][0].className = `${ name}-move-style z-index`
          },
          //重置
          reset() { 
            this.$refs.first[0].className = ''
            this.$refs.second[0].className = ''
            this.$refs.third[0].className = ''
            this.$refs.fourth[0].className = ''
            this.$refs.fifth[0].className = ''
            delete sessionStorage.currentName
          }
        }
      }
    </script>
    
    <style scoped>
      #import-template { 
        perspective: 600px;
        transform-style: preserve-3d;
      }
      .box { 
        padding-top: 50px;
        width: 100%;
        height: 230px;
        display: flex;
        justify-content: space-between;
        perspective: 600px;
        /*transform-style: preserve-3d;*/
        /*backface-visibility: hidden;*/
      }
      .box li { 
        height: 200px;
        transition: all 2s;
        cursor: pointer;
      }
      .box li img { 
        display: block;
        width: 100%;
        height: 100%;
      }
    
      /* 3D效果 */
      .box li#first { 
        transform: rotateY(90deg) translateX(10px);
      }
      .box li#second { 
        transform: rotateY(50deg) translateX(14px);
      }
      .box li#third { }
      .box li#fourth { 
        transform: rotateY(-50deg) translateX(-14px);
      }
      .box li#fifth { 
        transform: rotateY(-90deg) translateX(-10px);
      }
    
      .first-move-style { 
        transform: translate(570px, 150px) scale(1.6)!important;
      }
      .second-move-style { 
        transform: translate(284px, 150px) scale(1.6)!important;
      }
      .third-move-style { 
        transform: translate(0, 150px) scale(1.6)!important;
      }
      .fourth-move-style { 
        transform: translate(-284px, 150px) scale(1.6)!important;
      }
      .fifth-move-style { 
        transform: translate(-570px, 150px) scale(1.6)!important;
      }
    
      .z-index { 
        z-index: 999
      }
    
      /* 2D效果 */
      /*.box li#first {*/
      /* transform: rotateY(20deg) skewY(-10deg) translateY(58px);*/
      /*}*/
      /*.box li#second {*/
      /* transform: rotateY(20deg) skewY(-5deg) translate(-7px, 15px);*/
      /*}*/
      /*.box li#fourth {*/
      /* transform: rotateY(-20deg) skewY(5deg) translate(7px, 15px);*/
      /*}*/
      /*.box li#fifth {*/
      /* transform: rotateY(-20deg) skewY(10deg) translateY(58px);*/
      /*}*/
    
      /*.first-move-style {*/
      /* transform: translate(570px, 150px) scale(1.6)!important;*/
      /*}*/
      /*.second-move-style {*/
      /* transform: translate(284px, 150px) scale(1.6)!important;*/
      /*}*/
      /*.third-move-style {*/
      /* transform: translate(0, 150px) scale(1.6)!important;*/
      /*}*/
      /*.fourth-move-style {*/
      /* transform: translate(-284px, 150px) scale(1.6)!important;*/
      /*}*/
      /*.fifth-move-style {*/
      /* transform: translate(-570px, 150px) scale(1.6)!important;*/
      /*}*/
    
      /* 测试样式 */
      /*.box li#first {*/
      /* transform: rotateY(25deg) skewY(10deg);*/
      /*}*/
      /*.box li#second {*/
      /* transform: rotateY(20deg) skewY(5deg) translate(-7px, 40px);*/
      /*}*/
      /*.box li#third {*/
      /* transform: translateY(52px);*/
      /*}*/
      /*.box li#fourth {*/
      /* transform: rotateY(-20deg) skewY(-5deg) translate(7px, 40px);*/
      /*}*/
      /*.box li#fifth {*/
      /* transform: rotateY(-25deg) skewY(-10deg);*/
      /*}*/
    
      /*.first-move-style {*/
      /* transform: translate(570px, 150px) scale(1.2)!important;*/
      /*}*/
      /*.second-move-style {*/
      /* transform: translate(284px, 150px) scale(1.2)!important;*/
      /*}*/
      /*.third-move-style {*/
      /* transform: translate(0, 150px) scale(1.2)!important;*/
      /*}*/
      /*.fourth-move-style {*/
      /* transform: translate(-284px, 150px) scale(1.2)!important;*/
      /*}*/
      /*.fifth-move-style {*/
      /* transform: translate(-570px, 150px) scale(1.2)!important;*/
      /*}*/
    </style>