Vue--使用钩子函数模拟小球半场动画

最新推荐文章于 2021-06-19 22:47:12 发布

刘能耐

最新推荐文章于 2021-06-19 22:47:12 发布

阅读量161

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44683100/article/details/106968411

版权

Vue–使用钩子函数模拟小球半场动画

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script src="../lib/vue.js"></script>
 <style>
     .ball{
         width: 15px;
         height: 15px;
         border-radius:50%;
         background-color:red ;
     }
 </style>
</head>

<body>
 <div id="app">
     <input type="button" value="抛出" @click="flag=!flag">
    
     <!--使用transition元素把小球包裹起来-->
     <transition
     @before-enter="beforeEnter"
     @enter="enter"
     @after-enter="afterEnter">
        <div class="ball" v-show="flag"></div>
     </transition>
 </div>
 <script>
    // Vue.directive("focus",function(el){})
 var vm=new Vue({
 el:'#app',
 data:{
     flag:false
 },
 methods:{
     //注意：动画钩子函数第一个参数：el，表示要执行动画的那个DOM元素，是个原生JS DOM对象
     //可以认为el通过这种方式获取的原生对象---document.getelementByid（''）
    beforeEnter(el){
        
        //beforeEnter表示动画入场前，此时，动画尚未开始，可以在beforeEnter中，设置元素开始动画之前的起始样式
        el.style.transform="translate(0, 0)"     //设置小球开始动画的起始位置

    },
    
    enter(el,done) {
       //必须加下面一行，否则不会出现应有的效果
        el.offsetWidth;//这里可以理解成强制浏览器刷新，也可以写el.offsetHeigh
        //enter表示动画开始之后的样式，这里可以设置小球完成动画之后的，结束状态
        el.style.transform="translate(150px,450px)"     //终止位置
        el.style.transition="all 1s ease"                //过渡时间
        done()      //立即消失，防抖动
        
    },
    afterEnter(el){
        //动画完成之后，回调用afterEnter
        this.flag=!this.flag
    }
 }
 });
 </script>
</body>

</html>

效果图
在这里插入图片描述

刘能耐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue--使用钩子函数模拟小球半场动画

Vue–使用钩子函数模拟小球半场动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl
复制链接

扫一扫