移动端布局 小记

Posted 2020-10-16 ankle

 

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