vue.js入门五

最新推荐文章于 2024-06-12 08:41:10 发布

三宝鸭

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量84

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_43542074/article/details/97404171

版权

前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

半场动画

<!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>vueStudy5</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- Vue 要实现异步加载需要使用到 vue-resource 库 -->
    <!-- vue-resource 依赖于 Vue ，所以先后顺序要注意 -->
    <!-- <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script> -->
    <link rel="stylesheet" href="css/animate.css" /> 
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .ball{
            width:30px;
            height:30px;
            border-radius:50%;
            background:orange;
        }
    </style>
</head>
<body>  <!--利用钩子函数实现半场动画-->
    <div id="app">

        <input type="button" value="快到碗里来" @click="flag=!flag">
        <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter" >
            <div class="ball" v-show="flag"></div>
        </transition>

    </div>
    <script>

        //new 出来的这个vm对象就是 MVVM 中的VM调度者
        var vm = new Vue({
            el: '#app', 
            data:{
                flag:false,
            },
            methods:{// el 代表要执行动画的那个元素是个原生的 JS DOM 对象
                // 可以认为 el 是通过 document.getElementById（''） 这种方式得到的
                beforeEnter(el){
                    // 表示动画入场之前，可设置动画开始之前的起始样式
                    el.style.transform = "translate(0,0)" //设置起始位置
                },
                enter(el,done){
                    el.offsetWidth //如果不写，出不来动画效果。 可以认为 el.offset会强制动画刷新
                    // 表示动画开始之后的样式，可以设置小球完成动画之后的，结束状态
                    el.style.transform = "translate(500px,500px)" //设置结束位置
                    el.style.transition = "all 1s ease"
                    done() //执行完成立即消失
                },
                afterEnter(el){
                    //动画完成之后会调用 afterEnter
                    this.flag = !this.flag
                }
            },
        });
    </script>

</body>
</html>

三宝鸭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js入门五

半场动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
复制链接

扫一扫

专栏目录