移除框架自身的动画,不包括主App内容区的Element-ui动画。

This commit is contained in:
jlt
2022-04-03 18:44:49 +08:00
parent 6ff5109ae3
commit c42bd7f22b
17 changed files with 2279 additions and 2260 deletions

View File

@ -138,22 +138,22 @@
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
/*-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);*/
/*transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);*/
}
.loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
/*-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);*/
/*transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);*/
}
.loaded #loader {
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
/*-webkit-transition: all 0.3s ease-out;*/
/*transition: all 0.3s ease-out;*/
}
.loaded #loader-wrapper {
@ -161,8 +161,8 @@
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
/*-webkit-transition: all 0.3s 1s ease-out;*/
/*transition: all 0.3s 1s ease-out;*/
}
.no-js #loader-wrapper {

View File

@ -48,7 +48,7 @@
border-radius: 8px;
border: none;
outline: none;
transition: 600ms ease all;
//transition: 600ms ease all;
position: relative;
display: inline-block;
@ -58,7 +58,7 @@
&:before,
&:after {
width: 100%;
transition: 600ms ease all;
//transition: 600ms ease all;
}
}
@ -70,7 +70,7 @@
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
//transition: 400ms ease all;
}
&::after {

View File

@ -90,3 +90,20 @@
.el-submenu__icon-arrow {
display: none;
}
.el-menu, .el-icon-arrow-down {
transition: none;
-webkit-transition: none;
}
.el-menu--inline, .el-menu__title, .nest-menu {
transition: none;
-webkit-transition: none;
}
.el-dialog, .el-dialog__wrapper, .v-modal {
transition: none;
-webkit-transition: none;
}
//.el-menu-

View File

@ -1,6 +1,6 @@
@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
//@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
@import './btn.scss';
@ -144,7 +144,7 @@ aside {
width: 100%;
text-align: right;
padding-right: 20px;
transition: 600ms ease position;
//transition: 600ms ease position;
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
.subtitle {

View File

@ -2,7 +2,7 @@
.main-container {
min-height: 100%;
transition: margin-left .28s;
//transition: margin-left .28s;
margin-left: $base-sidebar-width;
position: relative;
}
@ -12,8 +12,8 @@
}
.sidebar-container {
-webkit-transition: width .28s;
transition: width 0.28s;
//-webkit-transition: width 0.28s;
//transition: width 0.28s;
width: $base-sidebar-width !important;
background-color: $base-menu-background;
height: 100%;
@ -168,14 +168,15 @@
}
.sidebar-container {
transition: transform .28s;
//-webkit-transition: width 1.28s;
//transition: transform 1.28s;
width: $base-sidebar-width !important;
}
&.hideSidebar {
.sidebar-container {
pointer-events: none;
transition-duration: 0.3s;
//transition-duration: 0.3s;
transform: translate3d(-$base-sidebar-width, 0, 0);
}
}

View File

@ -161,7 +161,7 @@ export default {
.header-search-select {
font-size: 18px;
transition: width 0.2s;
/*transition: width 0.2s;*/
width: 0;
overflow: hidden;
background: transparent;

View File

@ -65,7 +65,7 @@ export default {
background-color: #ebeef5;
box-shadow: 0 0 5px 1px #ccc;
::v-deep .el-image__inner {
transition: all 0.3s;
/*transition: all 0.3s;*/
cursor: pointer;
&:hover {
transform: scale(1.2);

View File

@ -59,7 +59,7 @@ export default {
overflow: hidden;
position: absolute;
transform-origin: 95% 40%;
transition: all 0.3s ease-in-out;
/*transition: all 0.3s ease-in-out;*/
}
/* .pan-thumb:after {
@ -123,7 +123,7 @@ export default {
margin: 7px auto 0;
font-family: 'Open Sans', Arial, sans-serif;
opacity: 0;
transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
/*transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;*/
transform: translateX(60px) rotate(90deg);
}

View File

@ -94,7 +94,7 @@ export default {
top: 0;
left: 0;
opacity: 0;
transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
/*transition: opacity .3s cubic-bezier(.7, .3, .1, 1);*/
background: rgba(0, 0, 0, .2);
z-index: -1;
}
@ -107,14 +107,14 @@ export default {
top: 0;
right: 0;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
transition: all .25s cubic-bezier(.7, .3, .1, 1);
/*transition: all .25s cubic-bezier(.7, .3, .1, 1);*/
transform: translate(100%);
background: #fff;
z-index: 40000;
}
.show {
transition: all .3s cubic-bezier(.7, .3, .1, 1);
/*transition: all .3s cubic-bezier(.7, .3, .1, 1);*/
.rightPanel-background {
z-index: 20000;

View File

@ -123,7 +123,7 @@ export default {
height: 100%;
float: left;
cursor: pointer;
transition: background .3s;
/*transition: background .3s;*/
-webkit-tap-highlight-color:transparent;
&:hover {
@ -164,7 +164,7 @@ export default {
&.hover-effect {
cursor: pointer;
transition: background .3s;
/*transition: background 0.3s;*/
&:hover {
background: rgba(0, 0, 0, .025)

View File

@ -1,6 +1,6 @@
<template>
<div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<transition name="sidebarLogoFade">
<!-- <transition name="sidebarLogoFade">-->
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
@ -9,7 +9,7 @@
<img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
</router-link>
</transition>
<!-- </transition>-->
</div>
</template>
@ -44,7 +44,7 @@ export default {
<style lang="scss" scoped>
.sidebarLogoFade-enter-active {
transition: opacity 1.5s;
/*transition: opacity 1.5s;*/
}
.sidebarLogoFade-enter,

View File

@ -309,7 +309,7 @@ export default {
vertical-align: 2px;
border-radius: 50%;
text-align: center;
transition: all .3s cubic-bezier(.645, .045, .355, 1);
/*transition: all .3s cubic-bezier(.645, .045, .355, 1);*/
transform-origin: 100% 50%;
&:before {
transform: scale(.6);

View File

@ -94,7 +94,7 @@ export default {
right: 0;
z-index: 9;
width: calc(100% - #{$base-sidebar-width});
transition: width 0.28s;
/*transition: width 0.28s;*/
}
.hideSidebar .fixed-header {

View File

@ -73,7 +73,8 @@ DictData.install()
*/
Vue.use(Element, {
size: Cookies.get('size') || 'medium' // set element-ui default size
// size: Cookies.get('size') || 'medium' // set element-ui default size
size: 'medium'
})
Vue.config.productionTip = false

View File

@ -12,7 +12,7 @@ module.exports = {
/**
* 是否显示顶部导航
*/
topNav: true,
topNav: false,
/**
* 是否显示 tagsView

View File

@ -131,7 +131,7 @@ export default {
float: left;
margin: 14px 0 0 14px;
padding: 16px;
transition: all 0.38s ease-out;
/*transition: all 0.38s ease-out;*/
border-radius: 6px;
}