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

最新推荐文章于 2024-03-18 11:32:10 发布

毛三仙

最新推荐文章于 2024-03-18 11:32:10 发布

阅读量625

点赞数 8

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

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

版权

css 专栏收录该内容

21 篇文章 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>