CSS--交互效果

动画过渡效果

//vue

<div class="search-list" v-show="searches.length">
      <transition-group name="list" tag="ul">
            <li @click="selectItem(item)" class="search-item" :key="item" v-for="item in searches">
                <span class="text">{{item}}</span>
                <span class="icon" @click.stop="deleteOne(item)">
                    <i class="icon-delete"></i>
                </span>
            </li>
      </transition-group>
</div>

//js

<script type="text/ecmascript-6">
export default {
    props: {
        searches: {
            type: Array,
            default: []
        }
    },
    methods: {
        selectItem(item) {
            this.$emit('select', item)
        },
        deleteOne(item) {
            this.$emit('delete', item)
        }
    }
}
</script>

//css

<style lang="stylus" scoped>

.search-list
    .search-item
        display flex
        align-items center
        height 40px
        overflow hidden
        &.list-enter-active, &.list-leave-active
            transition all 0.1s
        &.list-enter, &.list-leave-to
            height 0
        .text
            flex 1
            color #000
        .icon
            extend-click()
            .icon-delete
                font-size 11px
                color #fff
                
</style>