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;
}

移動端布局 小記