移動端布局 小記
阿新 • • 發佈:2017-12-05
ive form scale content over cit -a ubi inter
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; }
移動端布局 小記