zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Linq To Sql 大全
    lambda表达式学习
    一步一步学Linq to sql系列文章
    MVC 学习
    Guava环境设置
    ANT简介
    Quartz特点
    XStream环境设置
    log4j配置
    类是什么?
  • 原文地址:https://www.cnblogs.com/vinieo/p/9953327.html
Copyright © 2011-2022 走看看