Vue练习二十八:04_01_transition应用(未完成)

<template>
    <div class="nav">
        <ul>
            <li v-for="(list,index) in lists" :key="list.name"
            @mouseover="handleOver(list)"
            @mouseout="handleOut(list)"
            >
                <a href="#">{{ list.name }}</a>
                <transition name="fade"
                @before-enter="beforeEnter"
                @enter="enter"
                @leave="leave"
                >                
                <div class="subnav" v-if="list.isActive" :data-index="index">
                    <em class="arrow"></em>
                    <p>
                        <span>
                            <a href="#" v-for="item in list.subname" :key="item.mes">
                                {{item.mes }} {{item.bar}}
                            </a>
                        </span>
                    </p>
                </div>
                </transition>
            </li>
        </ul>
    </div>
</template>
<script>
import {lists} from ‘./lists‘;
import { setTimeout } from ‘timers‘;
export default {
    name:‘Test‘,
    data(){
        return{                       
            lists:lists
        }
    },
    methods:{
        handleOver(list){
            list.isActive=true
        },
        handleOut(list){
            list.isActive=false
        },
        beforeEnter(el){
            el.style.display=‘none‘
        },
        enter(el,done){
            el.style.display=‘block‘;
            var nav=el.offsetParent;
            var myUl=el.offsetParent.firstChild;
            var myLi=myUl.childNodes;
            var index=el.dataset.index;
            var em=el.firstChild;

            nav.offsetWidth - myLi[index].offsetLeft > el.offsetWidth ?
            el.style.left = myLi[index].offsetLeft + ‘px‘ :
            el.style.right =0;

            em.style.left=myLi[index].offsetLeft - el.offsetLeft + 50 + ‘px‘;

            done()

        },
        leave(el,done){
            setTimeout(function(){
                el.style.display=‘none‘
            },300)
            done()
        }
    }
}
</script>