【前端】flex布局未完待续

叶常落

已于 2022-09-05 22:11:16 修改

阅读量213

点赞数

分类专栏： frontend 文章标签： css

于 2022-08-29 23:39:54 首次发布

本文链接：https://blog.csdn.net/lineuman/article/details/126594853

版权

frontend 专栏收录该内容

71 篇文章 0 订阅

订阅专栏

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>

在这里插入图片描述