vue实现简单动画小案例（详解）

最新推荐文章于 2024-05-03 20:01:01 发布

清风无虑skr

最新推荐文章于 2024-05-03 20:01:01 发布

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/weixin_43889532/article/details/106788522

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

过渡

过渡其实就是一个淡入淡出的效果。Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

JavaScript 钩子

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
 
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

// ...
methods: {

beforeEnter: function (el) {
  },
  enter: function (el, done) {

  },
  afterEnter: function (el) {

  },
  enterCancelled: function (el) {

  },
  beforeLeave: function (el) {

  },
  leave: function (el, done) {

  },
  afterLeave: function (el) {

  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {

  }
}

已经写了一个综合的案例了，若拆开可能对这部分内容还是不明白，所以直接拿了个完整的案例来学习：
例子（来源）：

<div id = "databinding">
<button v-on:click = "show = !show">点我</button>
<transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
    <p v-if="show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</transition>
</div>
<script type = "text/javascript">
new Vue({
  el: '#databinding',
  data: {
    show: false
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  }
})
</script>

过渡与动画综合案例

这个案例虽然很小，但仔细看看还是能学到很多知识的：
源代码：

<!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>
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }

        .del li{
        list-style: none;
        padding: 10px;
		text-align: center;
      }

    .del{
        position: absolute;
        top:45%;
        left: 45%;
        width: 300px;
        border: 1px solid rgba(0,0,0,0.1);
        transition: all 0.5s;
    }
    </style>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <div class="add">
            编号: <input id="id"  v-focus type="text" v-model="id">
			品牌名称: <input v-model="name" type="text">
            <button @click="add">添加</button>
        </div>
        
        <div>
            <table class="tb">
                <tr>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>创立时间</th>
                    <th>操作</th>
                </tr>
                <tr v-if="list.length <= 0">
                    <td colspan="4">没有品牌数据</td>
                </tr>
                <!--加入: key="index" 时候必须把所有参数写完整  -->
                <tr v-for="(item,key,index) in list" :key="index">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime | dateFrm("/")}}</td>
                    <!-- 使用vue来注册事件时，我们在dom元素中是看不到的 -->
                    <td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
                </tr>
            </table>
        </div>

        <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter ="afterEnter"
            @before-leave="beforeLeave"
            @leave="leave"
            @after-leave ="afterLeave"
        >
            <div class="del" v-show="isshow">
                <ul>
                    <li>您确定要删除当前数据吗</li>
                    <li>
                        <button @click="delById">确定</button>
                        <button @click="showClose">关闭</button>
                    </li>
                </ul>
            </div>
        </transition>

    </div>
</body>

</html>

<script>
    // 使用全局过滤器（公有过滤器）
    Vue.filter("dateFrm", function (time,spliceStr) {
        // return "2017-11-16";
        var date = new Date(time);
        //得到年
        var year = date.getFullYear();
        // 得到月
        var month = date.getMonth() + 1;
        // 得到日
        var day = date.getDate();
        return year + spliceStr + month + spliceStr + day;
    });


    // 先将自定义指令定义好
    // directive有两个参数
    //参数一： 自定义指令 v-focus
    //参数二： 对象，对象中可以添加很多方法
    // 添加一个inserted方法:而这个方法中又有两个参数：
    //参数一:el 当前使用自定义指令的对象
    //参数二：obj 是指它(v-color="color" )后面设置的表达式
    //{expression:"color",value:"red",}
    Vue.directive("focus", {
        inserted: function (el, obj) {
            // console.log(el);
            el.focus();
        }
    });

    var vm = new Vue({
        el: "#app",
        data: {
            //delId:"",// 用来将要删除数据的id进行保存
            isshow:false,
            color: "green",
            id: 0,
            name: '',
            list: [
                { "id": 1, "name": "淘宝", "ctime": Date() },
                { "id": 2, "name": "京东", "ctime": Date() }
            ]
        },
        // mounted(){
        //     this.getFocus()
        // },
        methods: {
            add: function () {
                //将id和namepush到list数组中
                this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });
            },
            del: function (id) {
                this.isshow = true;
                // 将得到的id保存到delId里面
                this.delId = id;
            },
            beforeEnter:function(el) {
                el.style.left = "100%";
            },
            enter:function(el,done) {
                el.offsetHeight;
                el.style.left = "35%";
            },
            afterEnter:function(el){

            },
            beforeLeave:function(el){
                el.style.left = "35%";
            },
            leave:function(el,done){
                el.offsetHeight;
                el.style.left = "100%";
                setTimeout(function(){
                    done();
                },500);
            },
            afterLeave:function(el){

            },
            showClose:function(el){
                this.isshow = false;
            },
            delById:function() {
                _this = this;
                // 根据DelId删除对应的数据
                 var index = this.list.findIndex(function(item){
                    return item.id ==_this.delId;
                });
                this.list.splice(index,1);
                // 关闭删除框
                this.isshow = false;
            }
        }
    });

</script>

自定义指令

默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。
案例：文本框自动获取焦点即当刷新后光标仍在文本框内，不需要点击文本框就可以输入

<div id="app">
			<p>页面载入时，input 元素自动获取焦点：</p>
			<input v-focus>
		</div>

// // 注册一个全局自定义指令 v-focus
		// Vue.directive('focus', {
		//   // 当绑定元素插入到 DOM 中。
		//   inserted: function (el) {
		//     // 聚焦元素
		//     el.focus()
		//   }
		// })
		// // 创建根实例
		// new Vue({
		//   el: '#app'
		// })
		// 注册一个局部自定义指令 v-focus
		new Vue({
		  el: '#app',
		  directives: {
		    // 注册一个局部的自定义指令 v-focus
		    focus: {
		      // 指令的定义
		      inserted: function (el) {
		        // 聚焦元素
		        el.focus()
		      }
		    }
		  }
		})

钩子函数
指令定义函数提供了几个钩子函数（可选）：

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

unbind: 只调用一次，指令与元素解绑时调用。

钩子函数参数
钩子函数的参数有：

el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象，包含以下属性：
name: 指令名，不包括 v- 前缀。
value: 指令的绑定值，例如： v-my-directive=“1 + 1”, value 的值是 2。
oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的表达式或变量名。例如 v-my-directive=“1 + 1” ， expression 的值是 “1 + 1”。
arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 “foo”。
modifiers: 一个包含修饰符的对象。例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 编译生成的虚拟节点。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

钩子函数案例：

<!-- 钩子函数参数的应用 -->
		<div id="app1"  v-red:hello.age.big="message">
		</div>
		//创建指令v-red
Vue.directive('red', {
		  bind: function (el, binding, vnode) {
		    var s = JSON.stringify
		    el.innerHTML =
		      'name: '       + s(binding.name) + '<br>' +
		      'value: '      + s(binding.value) + '<br>' +
		      'expression: ' + s(binding.expression) + '<br>' +
		      'argument: '   + s(binding.arg) + '<br>' +
		      'modifiers: '  + s(binding.modifiers) + '<br>' +
		      'vnode keys: ' + Object.keys(vnode).join(', ')
		  }
		})
		new Vue({
		  el: '#app1',
		  data: {
		    message: '清风无虑skr'
		  }
		})

总结：由于时间原因今天的许多文本介绍都是在官网的介绍，我就不再详细的介绍了，案例也没写太多，后面我将写一个关于vue过渡动画以及自定义指令的综合案例，到时候再和大家详细分享下。

清风无虑skr

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue实现简单动画小案例（详解）

过渡过渡其实就是一个淡入淡出的效果。Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-ent
复制链接

扫一扫

专栏目录