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

Posted 2022-05-26 sx00xs

Demo 在线地址：
https://sx00xs.github.io/test/28/index.html
---------------------------------------------------------------
ide: vscode
文件格式：.vue
解析：（待补）

<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>