css+js 选项卡动画效果

选项卡上下左右翻转动画效果

<template><div class="web-box"><div class="topTitle"><div class="topTitle1">标题标题</div></div><div class="info-wrap"><div style="width: 100%;height: 100%;"><div class="system-list" v-if="navList.length>0"><el-carousel :loop="false" indicator-position="none" arrow="always" :autoplay="false"style="width: 100%;height: 100%;"><el-carousel-item class="nav-list-1" v-for="(item,index) in navList" :key="index"><div class="nav-item" :title="b.sysName" v-for="(b,i) in item" :key="i"><div class="change-box" v-if="b.hasAuth"><div class="picBox"><div class="show nav-item-content"><div class="nav-item-left"><img class="sysIcon" :src="imgBaseUrl+b.sysIcon"/></div><div class="nav-item-right"><div class="nav-item-name">{{b.sysName}}</div></div></div><div class="hide"><div class="hide-name">{{b.sysName}}</div><div class="hide-text" @click="clickNav(b)">立即进入 ></div></div></div></div><div class="picBox" v-else><div class="show nav-item-content gray"><div class="nav-item-left"><img class="sysIcon" :src="imgBaseUrl+b.sysIcon"/></div><div class="nav-item-right"><div class="nav-item-name">{{b.sysName}}</div></div></div></div></div></el-carousel-item></el-carousel></div><div class="system-list" v-else><el-empty :image-size="50" description="暂无数据"></el-empty></div></div></div></div>
</template><script>import Swiper from 'swiper'; // 注意引入的是Swiperimport 'swiper/css/swiper.min.css' // 注意这里的引入import $ from 'jquery';import { Index } from '@/components/Active/active'export default {name: "Index",data() {return {title: '',content: '',navList: [],navIndex: 0,nowList: [{hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},{hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},{hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},{hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},{hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},{hasAuth:true,sysIcon:'xxx.png',sysName:'xxx'},]};},// 监听属性 类似于data概念computed: {},created() {this.getConfigData();},methods: {//系统应用getConfigData() {let dataList = this.nowList;let nowList = [];let arr = [];//每18个一页,多余的进入下一个for (let i = 0; i < dataList.length; i++) {arr.push(dataList[i]);if (i % 18 === 17 || i === dataList.length - 1) {nowList.push(arr);arr = [];}}this.navList = nowList;setTimeout(() => {new Index($(".system-list .change-box"))this.mySystemSwiper()})},mySystemSwiper() {let mySystemSwiper = new Swiper('.system-list', {slidesPerView: 5,navigation: {nextEl: '.swiper-button-next', // 右按钮prevEl: '.swiper-button-prev', // 左按钮},})},},};
</script><style scoped lang="scss">@import '~@/components/Active/active.css';.web-box {width: 100%;height: calc(100vh - 50px);background: #f4f9ff;box-sizing: border-box;overflow: hidden;display: flex;justify-content: center;flex-wrap: wrap;.topTitle{width: 100%;height: 33vh;background-image: url("../assets/images/index/topbg.png");background-size: 100% 100%;display: flex;align-items: flex-end;justify-content: center;.topTitle1{width: 12.4vw;height: 4.23vh;text-align: center;line-height: 4.23vh;background-image: url("../assets/images/index/titleBg.png");background-size: 100% 100%;font-size: 1.66vh;letter-spacing: 0.09vw;color: #3c4b70;font-weight: bolder;}}.info-wrap {width: 83.07vw;height: 57vh;display: flex;flex-wrap: wrap;justify-content: space-between;background-color: #ffffff;border-radius: 1vh;box-shadow: -5px 5px 10px 0px rgba(86, 113, 207, 0.25);.system-list {margin-top: 2vh;width: 100%;height: calc(100% - 4.54vh);box-sizing: border-box;overflow: hidden;.el-carousel {padding: 0 3.5vw;}.nav-list-1 {width: 100%;height: 100%;display: flex;flex-wrap: wrap;align-content: start;padding-top: 3vh;.nav-item {width: 11.67vw;height: 11.04vh;margin:2vh 0.5vw;cursor: pointer;position: relative;.change-box, .picBox{width: 100%;height: 100%;}.nav-item-content{width: 100%;height: 100%;display: flex;align-items: center;padding: 0 0.5vw;background-size: 100% 100%;}.nav-item-left {width: 4vw;height: 4vw;display: flex;align-items: center;justify-content: center;.sysIcon {width: 3vw;height: 3vw;}}.gray{background-image: url("../assets/images/index/bg2.png") !important;.nav-item-left{filter: grayscale(95%);}.nav-item-right{color: #aeadad;}}.nav-item-right {width: 7vw;height: 100%;display: flex;flex-wrap: wrap;align-items: center;padding: 1vh 0.5vw 1vh 1vw;.nav-item-name {width: 5.5vw;font-size: 1.5vh;font-weight: bolder;}.nav-item-text {width: 4vw;height: 2vh;line-height: 2vh;text-align: center;cursor: pointer;background-color: rgba(255, 255, 255, 0.34);border-radius: 0.8vh;font-size: 1.2vh;}}&:nth-child(2n+1) .nav-item-content{color: #645b97;background-image: url("../assets/images/index/1.png");}&:nth-child(2n+2) .nav-item-content{color: #965c41;background-image: url("../assets/images/index/2.png");}&:nth-child(2n+3) .nav-item-content{color: #405f9a;background-image: url("../assets/images/index/3.png");}&:nth-child(2n+4) .nav-item-content{color: #a27a2d;background-image: url("../assets/images/index/4.png");}&:nth-child(2n+5) .nav-item-content{color: #257856;background-image: url("../assets/images/index/5.png");}&:nth-child(2n+6) .nav-item-content{color: #a27a2d;background-image: url("../assets/images/index/4.png");}&:nth-child(2n+7) .nav-item-content{color: #965c41;background-image: url("../assets/images/index/2.png");}&:nth-child(2n+8) .nav-item-content{color: #257856;background-image: url("../assets/images/index/5.png");}&:nth-child(2n+9) .nav-item-content{color: #645b97;background-image: url("../assets/images/index/1.png");}&:nth-child(2n+10) .nav-item-content{color: #405f9a;background-image: url("../assets/images/index/3.png");}&:nth-child(2n+11) .nav-item-content{color: #a27a2d;background-image: url("../assets/images/index/4.png");}&:nth-child(2n+12) .nav-item-content{color: #965c41;background-image: url("../assets/images/index/2.png");}&:nth-child(2n+13) .nav-item-content{color: #257856;background-image: url("../assets/images/index/5.png");}&:nth-child(2n+14) .nav-item-content{color: #645b97;background-image: url("../assets/images/index/1.png");}&:nth-child(2n+15) .nav-item-content{color: #405f9a;background-image: url("../assets/images/index/3.png");}&:nth-child(2n+16) .nav-item-content{color: #965c41;background-image: url("../assets/images/index/2.png");}&:nth-child(2n+17) .nav-item-content{color: #257856;background-image: url("../assets/images/index/5.png");}&:nth-child(2n+18) .nav-item-content{color: #645b97;background-image: url("../assets/images/index/1.png");}}}}}.swiper-button-prev {width: 2.86vw;height: 100%;background: #fff;left: 0;top: 0;margin: 0;color: #5e97ff;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;pointer-events: all !important;opacity: 1 !important;&:before {position: absolute;width: 0.94vw;height: 5.19vh;box-shadow: 0vh 0vh 0.37vh 0vh rgba(81, 103, 91, 0.4);border-radius: 0.37vh;font-size: 1.5vh;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;}&.swiper-button-disabled:before {pointer-events: none !important;opacity: 0.4 !important;}&:after {content: "";}}.swiper-button-next {width: 2.86vw;height: 100%;background: #fff;right: 0;top: 0;margin: 0;color: #5e97ff;pointer-events: all !important;opacity: 1 !important;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;&.swiper-button-disabled:before {pointer-events: none !important;opacity: 0.4 !important;}&:before {position: absolute;width: 0.94vw;height: 5.19vh;box-shadow: 0vh 0vh 0.37vh 0vh rgba(81, 103, 91, 0.4);border-radius: 0.37vh;font-size: 1.5vh;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;}&:after {content: "";}}.el-carousel::v-deep {.el-carousel__container {height: 100%;}.el-carousel__arrow {width: 28px;height: 72px;border-radius: 3px;background: #f0f2f5;color: rgba(94, 151, 255, 0.86);font-size: 24px;box-shadow: #DDD 0 2px 4px 1px;border: 1px solid #e5e8e7;&.el-carousel__arrow--left {left: -51px;i.el-icon-arrow-left:before {content: "\e792";}}&.el-carousel__arrow--right {right: -51px;i.el-icon-arrow-right:before {content: "\e791";}}}}}
</style>

components-Active文件夹：

1.active.css

.picBox{position: relative;transform-style: preserve-3d;transform-origin: 50% 50% -6vh;animation: 500ms ease-out 0ms 1 normal forwards;
}
.-left .picBox{position: relative;transform-style: preserve-3d;transform-origin: 50% 50% -6vw;animation: 500ms ease-out 0ms 1 normal forwards;
}
.-bottom .picBox{position: relative;transform-style: preserve-3d;transform-origin: 50% 50% -6vh;animation: 500ms ease-out 0ms 1 normal forwards;
}
.-right .picBox{position: relative;transform-style: preserve-3d;transform-origin: 50% 50% -6vw;animation: 500ms ease-out 0ms 1 normal forwards;
}.show,
.hide{position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;
}
.hide{color:#fff;/*background-color:#3c4b70;*/text-align:center;transform: translate3d(0,0,-1px);background-image: url("../../assets/images/index/bg1.png");background-repeat: no-repeat;background-size: 100% 100%;display: flex;flex-direction: column;justify-content: center;font-size: 1.6vh;font-weight: bolder;border-radius: 0.8vh;/* 3D空间内移动一个元素的位置 */
}
.hide .hide-name{}
.hide .hide-text{margin: 1vh auto 0;width: 4vw;height: 2vh;line-height: 2vh;text-align: center;cursor: pointer;background-color: rgba(255, 255, 255, 0.25);border-radius: 0.8vh;font-size: 1.2vh;
}.in-top .hide,
.out-top .hide
{transform-origin: 0% 100% !important;transform: translate3d(0, -100%, 0) rotate3d(1,0,0,90deg);
}
.in-top .picBox{animation-name: in-top;animation-play-state: running;
}
.out-top .picBox{animation-name: out-top;animation-play-state: running;
}
@keyframes in-top {from  {transform: rotate3d(0,0,0,0deg)}to    {transform: rotate3d(-1,0,0,90deg)}
}@keyframes out-top {from {transform: rotate3d(-1,0,0,90deg)}to   {transform: rotate3d(0,0,0,0deg)}
}
.in-right .hide,
.out-right .hide {transform-origin: 0% 0%;transform: translate3d(100%, 0, 0) rotate3d(0,1,0,90deg);
}
.in-right .picBox{animation-name: in-right;animation-play-state: running;
}
.out-right .picBox{animation-name: out-right;animation-play-state: running;
}
@keyframes in-right {from  {transform: rotate3d(0,0,0,0deg)}to    {transform: rotate3d(0,-1,0,90deg)}
}@keyframes out-right {from  {transform: rotate3d(0,-1,0,90deg)}to    {transform: rotate3d(0,0,0,0deg)}
}.in-bottom .hide,
.out-bottom .hide {transform-origin: 0% 0%;transform: translate3d(0, 100%, 0) rotate3d(-1,0,0,90deg);
}
.in-bottom .picBox{animation-name: in-bottom;animation-play-state: running;
}
.out-bottom .picBox{animation-name: out-bottom;animation-play-state: running;
}
@keyframes in-bottom {from  {transform: rotate3d(0,0,0,0deg)}to    {transform: rotate3d(1,0,0,90deg)}
}
@keyframes out-bottom {from  {transform: rotate3d(1,0,0,90deg)}to    {transform: rotate3d(0,0,0,0deg)}
}
.in-left .hide,
.out-left .hide {transform-origin: 100% 0;transform: translate3d(-100%,0,0) rotate3d(0,-1,0,90deg);
}
@keyframes in-left {from  {transform: rotate3d(0,0,0,0deg)}to    {transform: rotate3d(0,1,0,90deg)}
}
@keyframes out-left {from  {transform: rotate3d(0,1,0,90deg)}to    {transform: rotate3d(0,0,0,0deg)}
}
.in-left .picBox{animation-name: in-left;animation-play-state: running;
}
.out-left .picBox{animation-name: out-left;animation-play-state: running;
}

2.active.js

Index.prototype.init = function () {var self = this;this.nodes = [];Array.prototype.slice.call(self.node, 0).forEach(function (item, index) {self.nodes.push(self.update(item));self.bindEvents(item, index);});
};
Index.prototype.update = function (item) {return {w: item.offsetWidth,h: item.offsetHeight,l: item.offsetLeft,t: item.offsetTop}
};
Index.prototype.bindEvents = function (item, index) {var self = this;item.onmouseenter = function (e) {e.stopPropagation()self.addClass(e, item, 'in', index);return false;}item.onmouseleave = function (e) {self.addClass(e, item, 'out', index);return false;}
};
Index.prototype.addClass = function (e, item, state, index) {var direction = this.getDirection(e, index);var class_suffix = '';var class_durr = '';switch (direction) {case 0:class_suffix = '-top';break;case 1:class_suffix = '-right';break;case 2:class_suffix = '-bottom';break;case 3:class_suffix = '-left';break;}item.className = 'change-box';item.classList.add(class_suffix);item.classList.add(state + class_suffix);
};
Index.prototype.getDirection = function (e, index) {var w = this.nodes[index].w,h = this.nodes[index].h,x = Math.abs(e.offsetX) - w / 2 ,y = Math.abs(e.offsetY) - h / 2 ,w1 = Math.abs(e.offsetX),h1 = Math.abs(e.offsetY),w2 = w - Math.abs(e.offsetX),h2 = h - Math.abs(e.offsetY);// 取到x,y两点坐标let d = 0;if (x <= 0 && y <= 0 && w1 - h1 < 0){d = 3}else if (x <= 0 && y > 0){if (w1 - h2 <= 0){d = 3}else{d = 2}}else if (x > 0 && y <= 0){if (w2 - h1 >= 0){d = 0}else{d = 1}}else if (x > 0 && y > 0){if (w2 - h2 >= 0){d = 2}else{d = 1}}return d;//d的数值用于判断方向上下左右。
};
export function Index(node) {this.node = node;this.init();
}