zoukankan      html  css  js  c++  java
  • Vue练习二十八:04_01_transition应用(未完成)

    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>
  • 相关阅读:
    Python--关于dict
    数据结构之线性表的实现
    js数据类型检测小结
    javascript的执行机制—Event Loop
    深入理解理解 JavaScript 的 async/await
    操作系统管理CPU的直观想法
    入门Promise的正确姿势
    javascript的数据类型转换
    JS预编译详解
    如何去封装一个Ajax库
  • 原文地址:https://www.cnblogs.com/sx00xs/p/11266134.html
Copyright © 2011-2022 走看看