移除框架自身的动画,不包括主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%); -webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%); -ms-transform: translateX(-100%);
transform: translateX(-100%); transform: translateX(-100%);
-webkit-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); /*transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);*/
} }
.loaded #loader-wrapper .loader-section.section-right { .loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%); -webkit-transform: translateX(100%);
-ms-transform: translateX(100%); -ms-transform: translateX(100%);
transform: translateX(100%); transform: translateX(100%);
-webkit-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); /*transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);*/
} }
.loaded #loader { .loaded #loader {
opacity: 0; opacity: 0;
-webkit-transition: all 0.3s ease-out; /*-webkit-transition: all 0.3s ease-out;*/
transition: all 0.3s ease-out; /*transition: all 0.3s ease-out;*/
} }
.loaded #loader-wrapper { .loaded #loader-wrapper {
@ -161,8 +161,8 @@
-webkit-transform: translateY(-100%); -webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%); -ms-transform: translateY(-100%);
transform: translateY(-100%); transform: translateY(-100%);
-webkit-transition: all 0.3s 1s ease-out; /*-webkit-transition: all 0.3s 1s ease-out;*/
transition: all 0.3s 1s ease-out; /*transition: all 0.3s 1s ease-out;*/
} }
.no-js #loader-wrapper { .no-js #loader-wrapper {

View File

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

View File

@ -90,3 +90,20 @@
.el-submenu__icon-arrow { .el-submenu__icon-arrow {
display: none; 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 './variables.scss';
@import './mixin.scss'; @import './mixin.scss';
@import './transition.scss'; //@import './transition.scss';
@import './element-ui.scss'; @import './element-ui.scss';
@import './sidebar.scss'; @import './sidebar.scss';
@import './btn.scss'; @import './btn.scss';
@ -144,7 +144,7 @@ aside {
width: 100%; width: 100%;
text-align: right; text-align: right;
padding-right: 20px; 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%); 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 { .subtitle {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -309,7 +309,7 @@ export default {
vertical-align: 2px; vertical-align: 2px;
border-radius: 50%; border-radius: 50%;
text-align: center; 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%; transform-origin: 100% 50%;
&:before { &:before {
transform: scale(.6); transform: scale(.6);

View File

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

View File

@ -73,7 +73,8 @@ DictData.install()
*/ */
Vue.use(Element, { 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 Vue.config.productionTip = false

View File

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

View File

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