CSS3动画（transition，transform）和元素的隐藏显示display

本文链接：https://blog.youkuaiyun.com/wangshang1320/article/details/103695053

工作中经常会写一些简单的显示隐藏功能，可以适当加个动画

transition（过度动画，从某某某属性到某某某属性）

语法

transition: property duration timing-function delay;

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

transform （转化动画）

旋转：rotate()

缩放：scale()

翻转：skew()

transition和transform 动画会占文档流

display：none 不占文档流 block 占文档流

动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .main{
            height: 600px;
            color: #fff;
        }
        .down{
            height: 300px;
            transform: scaleY(0);
            transition: transform 0.8s;
            transform-origin: bottom center;
            background: #2c275b;
        }
        .active {
            height: 300px;
            transform: scaleY(1);
            transition: transform 0.8s;
            transform-origin: bottom center;
        }
        .btn{
            display: inline-block;
            margin-bottom: 20px;
            padding: 3px 10px;
            border-radius: 5px;
            background: #999;
        }
    </style>
</head>
<body>

<div class="main">
    <span class="btn" id="btn">测试</span>
    <div class="down">
        contentcontentcontentcontentcontentcontent
    </div>
</div>
<script>
    document.getElementById('btn').addEventListener('click',()=>{
        let element = document.getElementsByClassName('down')[0];
        addClass(element,'active');
    });
    function addClass (element,className) {
        element.className = element.className.indexOf(className)===-1 ? element.className+' '+className : element.className.replace(' active','') ;
    }
</script>
</body>
</html>