vue transition模拟一个下拉菜单过渡显示动画效果代码
代码语言:html
所属分类:布局界面
代码描述:vue transition模拟一个下拉菜单过渡显示动画效果代码
代码标签: vue transition 下拉菜单 过渡 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html { padding: 100px; height: 100%; } body { margin: auto; background: linear-gradient(#5e2973, #692424); } button { padding: 20px 60px; border: solid thin #820048; background: #b50064; color: #eee; } button:focus { outline: solid thin #ff1c99; } .list { position: absolute; width: 204px; margin: 0; padding: 0; list-style-type: none; transform-origin: top; transition: transform 0.4s ease-in-out; overflow: hidden; } .list li { padding: 10px; background: white; border-bottom: solid thin #eee; border-left: solid medium #cbc; } .slide-enter, .slide-l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0