css实现el-select右侧箭头向上向下动画

毛三仙

于 2024-01-30 11:39:28 发布

阅读量550

点赞数 8

分类专栏： css 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/m0_74149462/article/details/135929402

版权

css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<div class="chooseTag-tip">
    <i :class="['el-icon-arrow-up', tipFlag ? 'chooseTag-tip-up' : 'chooseTag-tip-down']"></i>
</div>

<script>
    tipFlag: false, // 需要一个操作能动态修改tipFlag【本文省略...】
</script>

<style lang="scss" scoped>
    .chooseTag {
        min-height: 34px;
        padding: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        cursor: pointer;
        position: relative;

        &-tip {
            position: absolute;
            right: 10px;
            top: 10px;

            i {
                font-size: 16px;
            }

            &-up {
                transition: transform 0.3s;
                transform: rotateZ(0deg) !important;
            }

            &-down {
                transition: transform 0.3s;
                transform: rotateZ(180deg);
            }

        }
    }
</style>