移動端布局 小記

標籤：cal   底線   wrap   bezier   ase   sla   abs   over   左右   

 

vue 做 左側功能表列，wrapper 為父級，彈出時顯示並從左側做滑入動畫，transform: translateX(-250px); 漸隱漸現。子級左右布局左側60%，右側40%，點擊滑出菜單且隱藏

.fadeIn-enter-active {  transition: all .4s ease;}.fadeIn-leave-active {  transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);}.fadeIn-enter, .fadeIn-leave-active {  transform: translateX(-250px);  opacity: 0;}

 

給a標籤hover效果 添加 底線 過渡動畫

a {  position: relative;  text-decoration: none;  cursor: pointer;}a::after {  content: "";  position: absolute;  left: 0;  bottom: 0;  width: 100%;  height: 2px;  background-color: #3F51B5;  transform: scaleX(0);  transition: .3s ease-in-out;}a:hover::after {  transform: scaleX(1);  transition: .3s ease-in-out;}

 

移動端布局 小記