【前端】flex布局未完待续

20220829
display: flex

1、modal弹窗：
2、侧边栏抽屉：

为什么直接通过js添加class无法触发transition?
为什么要设置一个延时动效才生效？

1、弹窗：

position:fixed
width: 100%;
height:100%
display: none block进行切换
在这里插入图片描述
弹窗之后如何让背景不能滚动？
弹窗出现时设置： document.body.style.overflow = ‘hidden’
弹窗关闭时设置：document.body.style.overflow= ‘auto’

2、抽屉效果：

如何实现动效？
核心代码：
transition: width .2s ease-in-out;

在这里插入图片描述

3、搜索框展开

 <style>
        .input {
            display: inline-block;
            width: 200px;
            height: 50px;
            transition: width .5s ease-in-out;
        }
        
        .input:focus {
            width: 500px;
            height: 50px;
            transition: width .5s ease-in-out;
        }
    </style>

在这里插入图片描述