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

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

<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>