<template>
<div id="item">
    <transition-group name="trans" v-on:enter="enter" v-on:leave="leave" v-on:after-leave="afterLeave">
    <div class="item-list" key="0"  id="item_box" v-bind:class="{'item-nomal':item_show,'item-big':!item_show}">
        <div class="item-main">
            <div class="item-details"  >
                <p class="item-details-title" >{{ items.title}}</p>
                <p class="item-details-author" >{{ items.author}}</p>
                <p class="item-details-journal" >{{ items.journal}}</p>
            </div>
            <div class="item-other" >
                <div class="item-other-txt">
                    <p class="item-other-time">{{items.time}}</p>
                    <a class="item-other-link"  v-on:click="clickmore()">more>></a>
                </div>
            </div>
        </div>
        <div class="item-other-abstract"  key="1" id="item_abstract" v-show="!item_show">
            <h4>Abstract</h4>
            <p>{{items.abstract}} </p>
            <ul>
                <li>bibtex</li>
                <li>view</li>
                <li>download</li>
            </ul>
        </div>
    </div>
    </transition-group >
 <transition name="trans">
    <div class="item-other-img">
        <img  v-bind:src="items.img" alt=""  key="2" v-bind:class="{'img-nomal':item_show,'img-big':!item_show}">
    </div>
</transition>
</div>
</template>

<script>
export default {
name:'item',
props: {
    items:{
        title:String,default: 'CS',
        author:String,
        default: 'Name',
        journal:String,
        default: 'AAAI',
        time:String,
        default: '2018',
        img:true,
        },
    },
methods: {
    clickmore(){ 
        this.item_show=!this.item_show;
    },
    enter(el,done){
        console.log('1');
        done()
    },
    afterLeave(el){
        console.log('1');
    },
    leave(el,done){
        console.log('1');
         done()
    },

  },
data () {
    return {
        item_show:false,
        max_h:0,
        height: 0,

    }
},
transitions:{
    'trans':{
                  beforeEnter(el) {
       console.log('1');
      },
      enter(el) {
         console.log('1');
      },
      afterEnter(el) {
         console.log('1');
      },
      enterCancelled(el) {
        // handle cancellation
      },

      beforeLeave(el) {
        console.log('1');
      },
      leave(el) {
      console.log('1');
      },
      afterLeave(el) {
        console.log('1');
      },

},
},
watch: {
    item_show:function()
    {
    }
},


}

</script>

<style lang="less">



.item-list{width:913px;padding-top: 10px;position: relative;border-bottom: 1px solid #777;float: left; transition: all 1s ease;overflow: hidden;}
.item-list:hover{ transition:0.8s; background-color:#f9f9f9;}
.item-big{height: auto;transition: all 1s ease;}
.item-nomal{ height: 180px;transition: all 1s ease;}
.item-main{width: 100%;height: 180px;padding-bottom: 0px;}
.item-details{width: 85%;text-align: left;float: left;margin-left: 10px;height: 180px;}
.item-details-title{font-size: 28px;    font-weight: 400;
    color: #1f2f3d;}
.item-details-author{     color: red;   font-size: 16px;
    line-height: 25px;}
.item-details-journal{     color: red;    font-size: 16px;
    line-height: 25px;}
.item-other{float: left;}
.item-other-link{ cursor: pointer;}
.item-other-txt{float: left;margin-left: 20px;}
.item-other-txt .item-other-time{height: 100px;}
.item-other-img{float: left;height: 180px;width: 20%;}
.img-nomal{    height: 140px;
    width: 140px;
    margin-top: 10px;
    margin-left: 10px;transition:.8s}
.img-big{ height: 180px;
    width: 180px;
    margin-top: 10px;
    margin-left: 10px; transition:.8s}
.item-other-abstract{ margin-left: auto;margin-right: auto;height: auto;width: 93%;}
.item-other-abstract h4{font-weight: 600;
        color: #2c3e50;font-size: 18px;margin-bottom: 5px;margin-top: 5px;}
.item-other-abstract p{ text-align: left;overflow: hidden;}
.item-other-abstract ul{ text-align: right;height: 20px;}
.item-other-abstract ul li{float: right;padding-left: 10px;padding-right: 10px;cursor: pointer;}
.item-other-abstract ul li+li{ border-right: 2px solid #777;}
.item-other-abstract ul li:hover{ color: rgb(134, 138, 127);}
.item-tran-leave-active{transition:1s cubic-bezier(1.0, 0.5, 0.8, 1.0);}
.item-tran-enter-active{transition:1s cubic-bezier(1.0, 0.5, 0.8, 1.0);}
.item-list-transition{overflow: hidden;transition:1s cubic-bezier(1.0, 0.5, 0.8, 1.0); }
.trans-enter-active,.trans-leave-active{transition:1s cubic-bezier(1.0, 0.5, 0.8, 1.0);}
</style>

都没什么反应。。