vue transition模拟一个下拉菜单过渡显示动画效果代码-html代码-BFW代码库

vue transition模拟一个下拉菜单过渡显示动画效果代码

代码语言：html

代码描述：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.........完整代码请登录后点击上方下载按钮下载查看