<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 class="item-details-author" >{{ items.author}}

                <p class="item-details-journal" >{{ items.journal}}

            </div>
            <div class="item-other" >
                <div class="item-other-txt">
                    <p class="item-other-time">{{items.time}}

                    <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>
            
{{items.abstract}} 
            <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 -sharp777;float: left; transition: all 1s ease;overflow: hidden;}
.item-list:hover{ transition:0.8s; background-color:-sharpf9f9f9;}
.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: -sharp1f2f3d;}
.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: -sharp2c3e50;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 -sharp777;}
.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>

. No, no, no.