移除框架自身的动画,不包括主App内容区的Element-ui动画。
This commit is contained in:
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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-
|
||||
|
@ -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 {
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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)
|
||||
|
@ -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,
|
||||
|
@ -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);
|
||||
|
@ -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 {
|
||||
|
@ -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
|
||||
|
@ -12,7 +12,7 @@ module.exports = {
|
||||
/**
|
||||
* 是否显示顶部导航
|
||||
*/
|
||||
topNav: true,
|
||||
topNav: false,
|
||||
|
||||
/**
|
||||
* 是否显示 tagsView
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user