多CSS属性值CSS变量占位技巧实例页面

CSS代码：

ui-popup {
    position: fixed;    
    width: 240px; height: 120px;
    padding: 2rem;
    background-color: #fff;
    border: solid;
    z-index: 9;
    animation: scaleIn .5s both;
}
ui-popup:not([open]) {
    display: none;
}
/* 两种不同的定位方式 */
.center-1 {
    inset: 0;
    margin: auto;
}
.center-2 {
    left: 50%; top: 50%;
    --transform: translate(-50%, -50%);
}
@keyframes scaleIn {
    /* 如果没有逗号，第一个popup显示无效 */
    from {
        transform: var(--transform, ) scale(0.1);
    }
    to {
        transform: var(--transform, ) scale(1);
    }
}

HTML代码：

<h4>正常scale动画</h4>
<p>
    <button id="btn1">内容显示</button>
</p>
<ui-popup id="popup1" class="center-1">非 translate 偏移居中，点击我关闭</ui-popup>
<h4>包含其他transform的scale动画</h4>
<p>
    <button id="btn2">内容显示</button>
</p>
<ui-popup id="popup2" class="center-2">translate 偏移居中，点击我关闭</ui-popup>

JS代码：

popup1.onclick = function () {
    this.removeAttribute('open');    
};
popup2.onclick = function () {
    this.removeAttribute('open');    
};
btn1.onclick = function () {
    popup1.toggleAttribute('open', true);
};
btn2.onclick = function () {
    popup2.toggleAttribute('open', true);
};