zoukankan      html  css  js  c++  java
  • js钩子函数实现一个简单动画

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
            #ball {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: pink;
            }
        </style>
    </head>
    <!-- 
        vue动画的js钩子函数相当于动画的生命周期函数
            。before-enter:进入之前触发
            。after-enter:进入后触发
            。enter-cancelled:结束进入阶段
            。before-leave:进入之前触发
            。after-leave:进入后触发
            。leave-cancelled:结束进入阶段
     -->
     <!-- 本例子只需进入阶段的动画效果 -->
    <body>
        <div id="app">
            <input type="button" value="点我" @click="flag=!flag">
            <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
                <div id="ball" v-show="flag"></div>
            </transition>
        </div>
    
    </body>
    <script src="https://cdn.staticfile.org/vue/2.6.10/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {//初始小球不显示
                flag: false
            },
            methods: {
                // el 即操作的元素对象
                beforeEnter(el) {
                    el.style.transform='translate(0,0)';//初始小球位置
                },
                enter(el){
                    //必须加下面一行,否则不会出现应有的效果
                    el.offsetWidth;//这里可以理解成强制浏览器刷新,也可以写el.offsetHeight
                    el.style.transition='all 1.5s ease';
                    el.style.transform='translate(150px,250px)';
                },
                afterEnter(el){
                    console.log('ok');
                    this.flag=false;//隐藏小球
                }
            }
        });
    </script>
    
    </html>
  • 相关阅读:
    QB学堂济南游记
    区间质数查询 luoguP1865
    基础数据结构 ①(栈|队列|链表)
    图论算法->最短路
    小谈记忆化搜索
    Hibernate其它API
    Hibernate中Session与本地线程绑定
    Hibernate事务代码规范写法
    实体类对象的三种状态
    对实体类的CRUD操作
  • 原文地址:https://www.cnblogs.com/angle-xiu/p/11610519.html
Copyright © 2011-2022 走看看