袁磊老师的课，VUE（五）

最新推荐文章于 2019-05-14 16:58:56 发布

赵俸堃是我的名字

最新推荐文章于 2019-05-14 16:58:56 发布

阅读量201

点赞数

分类专栏：前端基础袁磊老师的课 Vue 文章标签： vue vue过渡动画

本文链接：https://blog.csdn.net/qq_43511842/article/details/89924804

版权

前端基础同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

袁磊老师的课

19 篇文章 0 订阅

订阅专栏

Vue

8 篇文章 0 订阅

订阅专栏

一、watch
当每次监听到值发生改变时，执行函数
适用于，当数据发生变化时，执行异步操作或较大开销操作的情况

写法：

watch:{
	name:{
	
		handler(newName, oldName){},
		deep:true,
		immediate:true
}
}

练习：电脑瓦特了，没写什么备注…

<!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>
</head>

<body>
    <div id="app">
        <input v-model="firstName">
        <input v-model="lastName">
        <input v-model="city.state">
        <h2>watch全名{{fullName}}</h2>
        <h2>计算属性全名{{qm}}</h2>
    </div>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                firstName: "Mical",
                lastName: "Jordan",
                fullName: "",
                city: {
                    state: "cal",
                    name: "los"
                }
            },
            watch: {
                firstName: function (val) {
                    this.fullName = val + " " + this.lastName;
                },
                lastName(val) {
                    this.fullName = this.firstName + " " + val;
                },
                city: {
                    handler(newv, oldv) {
                        // alert(newv);
                        this.firstName = "Zhou";
                    },
                    deep: true, //深度监听
                    immediate: true, //立即执行
                },
            },
            //与computed的区别： watch经常做一些内部具有复杂的操作
            computed: {
                qm: function () {
                    return this.firstName + " " + this.lastName;
                }
            },
        });


        var uw = vm.$watch("firstName", function (newv, oldv) {
            //非深度监听，不能监听city
            console.log(newv, oldv);
        });
        uw;
    </script>
</body>

</html>

二、VUE过渡动画

与原来的动画的区别：不该变任何的东西，知识单纯的视觉上的改变
对于VUE的动画只有两种，一种是进入的动画，一种是消失的动画
写法：

<transition name="fade">
<p v--if = "show">hello</p>
</transition>

css的样式是要自己写的： fade-enter 等等

使用一个没有名字的,则v-是这些类名的默认前缀。如果你使用了,<transition name = "my-transition">那么v-enter会替换为my-transition-enter

自定义过渡的类名优先级高于普通的类名
过度动画钩子函数：例如：（进入）before-enter/enter/after-enter/enter-cancelled （离开）before-leave/leave/after-leave/leave-cancelled 用钩子函数是为了用已有的资源，在现实当中，有很多的js动画库，想要用其他的库，就要把其他库的内容写在钩子函数中。

练习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>Vue动画</title>
</head>
<style>
    /* 为什么写tr-enter呢？因为tr对应下面的transition名字 */
    .tr-enter {
        opacity: 0;
        /* 初始的时候，最保险的操作opacity设置为0 */
    }

    .tr-enter-to {
        opacity: 1;
        font-size: 100px;
        /* 如果在这个里面加上这种改变css效果的代码，是不会在动画结束后也保持这个大小的 */
    }

    /* 上面两个，第一个tr-enter是第一帧，第二个tr-enter-to是最后一帧 */
    .tr-enter-active {
        transition: all 3s;
    }

    /* 第三方库的动画效果 */
    .lc {
        opacity: 1;
    }

    .ltc {
        opacity: 0;
    }

    .lac {
        transition: all 3s ease;
    }

    /* 离开 */
</style>

<body>
    <div id="app">
        <button @click="seen=true">显示</button>
        <button @click="seen=false">隐藏</button>
        <!-- 下面的leave-class是为了展示第三方库的动画效果 !!!!!!!!!!且一定要在transition这个标签上！！！！！1-->
        <transition name="tr" leave-class="lc" leave-to-class="ltc" leave-active-class="lac">
            <!-- transition不给name也可以，但是尽量要给 -->
            <!-- transition用在两个场景中，第一个是出现，第二个是消失的时候，有v-if和v-show的时候才会用到 -->
            <div v-show="seen">vue过渡动画</div>
        </transition>
    </div>

    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                seen: true
            }
        })
    </script>
</body>

</html>

在这里插入图片描述
注意看下面的这个动画，在后面的3秒，字体是会变回原来的大小的，所以证明了vue过渡动画，是不会真的改变css的效果的，只做视觉冲击！

练习2
用animate.css也能实现动画哟！

<!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>用animate.css实现动画</title>
</head>
<style>
    /* 进入的初始状态 */
    .ltc .tr-enter {
        opacity: 0;
    }
/* 进入的终止状态 */
    .lc, .tr-enter-to{
        opacity: 1;
    }
</style>

<body>
    <div id="app">
        <button @click="seen=true">显示</button>
        <button @click="seen=false">隐藏</button>
        <!-- 下面的active-class中一定记得写animated！！！！ -->
        <transition name="tr" leave-class="lc" leave-to-class="ltc" leave-active-class="animated bounceOut"
            enter-active-class="animated bounceIn">
            <div v-show="seen">vue过渡动画</div>
        </transition>
    </div>

    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                seen: true
            }
        })
    </script>
</body>

</html>

赵俸堃是我的名字

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
袁磊老师的课，VUE（五）

一、watch当每次监听到值发生改变时，执行函数适用于，当数据发生变化时，执行异步操作或较大开销操作的情况写法：watch:{ name:{ handler(newName, oldName){}, deep:true, immediate:true}}练习：电脑瓦特了，没写什么备注…<!DOCTYPE html><html lang=...
复制链接

扫一扫