zoukankan      html  css  js  c++  java
  • Day3.5钩子函数实现动画

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/js/vue.js"></script>
    <style>
    .ball{
    20px;
    height: 20px;
    border-radius: 50%;
    background-color: rebeccapurple;
    }
    </style>
    </head>
    <body>
    <div id="app">
    <input type="button" value="加入购物车" @click="add">
    <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter">

    <div class="ball" v-if="flag"></div>
    </transition>
    </div>
    <script>
    const vm = new Vue({
    el:'#app',
    data:{
    flag:false
    },
    methods:{
    add(){
    this.flag = !this.flag
    },
    // 动画钩子函数的第一个参数:el 表示要执行动画的那个DOM元素,是个原生的JS DOM 对象
    // 可以认为 el 是通过 document.getelementById('') 方式获取到的原生JS DOM对象
    beforeEnter(el){
    // beforeEnter 表示动画入场之前,此时动画尚未开始,可以在 beforeEnter中设置
    // 开始动画之前的起始样式
    // 设置小球开始动画之前的起始位置
    el.style.transform = "translate(0,0)"
    },
    enter(el,done){
    // 这句话没有实际的作用,但是不写出不来动画效果,可以认为el.offsetWidth会强制动画刷新
    el.offsetWidth;
    // enter 表示动画开始之后的样式,这里可以设置小球完成动画之后的结束状态
    el.style.transform = "translate(150px,400px)";
    el.style.transition = "all 1s ease";
    //这里的done其实就是afterEnter这个函数,也就是说,done是afterEnter函数的引用,
    //如果不使用done,会延迟afterEnter中小球的消失
    done()
    },
    afterEnter(el){
    // console.log('ok');
    // 动画完成之后会调用 afterEnter
    this.flag = false
    }
    }
    })
    </script>
    </body>
    </html>
  • 相关阅读:
    my97date与struts2的结合使用
    window.frames["detailFrm"].isSubmitting = true;//?起什么作用
    apache ant
    JodaTime 简介
    dbgrid中没有数据原因1
    网页 BODY的topMargin 和leftMargin
    在java类中定义log
    discuz论坛移动后,如果不能连接上数据库。可能是连接数据库的用户密码不正确。
    在后台对字符串进行转码
    [转] 我们的企业比日本少了什么
  • 原文地址:https://www.cnblogs.com/zhaohui-116/p/12057266.html
Copyright © 2011-2022 走看看