refactor:add transition
This commit is contained in:
		@@ -1,5 +1,7 @@
 | 
				
			|||||||
@import './element-ui.scss';
 | 
					@import './element-ui.scss';
 | 
				
			||||||
@import './mixin.scss';
 | 
					@import './mixin.scss';
 | 
				
			||||||
 | 
					@import './transition.scss';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
body {
 | 
					body {
 | 
				
			||||||
  -moz-osx-font-smoothing: grayscale;
 | 
					  -moz-osx-font-smoothing: grayscale;
 | 
				
			||||||
  -webkit-font-smoothing: antialiased;
 | 
					  -webkit-font-smoothing: antialiased;
 | 
				
			||||||
@@ -45,17 +47,6 @@ a:hover {
 | 
				
			|||||||
  }
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
//vue router transition css
 | 
					 | 
				
			||||||
.fade-enter-active,
 | 
					 | 
				
			||||||
.fade-leave-active {
 | 
					 | 
				
			||||||
  transition: all .2s ease
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.fade-enter,
 | 
					 | 
				
			||||||
.fade-leave-active {
 | 
					 | 
				
			||||||
  opacity: 0;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
//main-container全局样式
 | 
					//main-container全局样式
 | 
				
			||||||
.app-main{
 | 
					.app-main{
 | 
				
			||||||
  min-height: 100%
 | 
					  min-height: 100%
 | 
				
			||||||
 
 | 
				
			|||||||
							
								
								
									
										32
									
								
								src/styles/transition.scss
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										32
									
								
								src/styles/transition.scss
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,32 @@
 | 
				
			|||||||
 | 
					//globl transition css
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/*fade*/
 | 
				
			||||||
 | 
					.fade-enter-active,
 | 
				
			||||||
 | 
					.fade-leave-active {
 | 
				
			||||||
 | 
					  transition: opacity 0.28s;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.fade-enter,
 | 
				
			||||||
 | 
					.fade-leave-active {
 | 
				
			||||||
 | 
					  opacity: 0;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/*fade*/
 | 
				
			||||||
 | 
					.breadcrumb-enter-active,
 | 
				
			||||||
 | 
					.breadcrumb-leave-active {
 | 
				
			||||||
 | 
					  transition: all .5s;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.breadcrumb-enter,
 | 
				
			||||||
 | 
					.breadcrumb-leave-active {
 | 
				
			||||||
 | 
					  opacity: 0;
 | 
				
			||||||
 | 
					  transform: translateX(20px);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.breadcrumb-move {
 | 
				
			||||||
 | 
					  transition: all .5s;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.breadcrumb-leave-active {
 | 
				
			||||||
 | 
					  position: absolute;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
		Reference in New Issue
	
	Block a user