vue动画—通过钩子函数实现半场动画操作


Posted in Javascript onAugust 09, 2020

注意:

1.起始位置设置了一个(0,0)在第一遍执行时,是没有作用的。在一次入场动画执行完成之后,在最终位置停下来并不在起始位置,通过这里的位置的设置可以将入场动画结束时的位置调到这里

2.理解enter()函数的el的指代对象和done()指代的回调函数

3.理解this.show = !this.show,这句话有两个作用。一是:控制显示和隐藏,二是:false —> true为半场动画,true—>false又是为另半场动画。这样就能完成一直循环执行半场动画的效果了。

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../lib/vue.js"></script>
</head>
<style>
 .ball{
  margin: 50px 50px;
  width: 15px;
  height: 15px;
  border-radius: 50px;
  background-color: brown;
 }
</style>
<body>
  <div id="app">
   <input type="button" value="跳进篮子里" v-on:click="show=!show">
   
   <transition
    v-on:before-enter="bEnter"
    v-on:enter="enter"
    v-on:after-enter="aEnter">
    <div class="ball" v-show="show"></div>
   </transition>
  </div>
 
  <script>
   var vm = new Vue({
    el:'#app', 
    data:{
     show:false
    },
    methods:{
     bEnter(el){
      el.style.transform = "translate(0,0)"
      //表示动画入场之前,坐标表示位置是在起始位置不动 
      //在一次入场动画执行完成之后,在最终位置停下来并不在起始位置,通过这里的位置的设置可以将入场动画结束时的位置调到这里 
     },
     enter(el,done){
      el.offsetTop;
      //必须要写一下offsetTop,offsetWeith等四种中的其中一种,强制刷新动画
      el.style.transform = "translate(200px,450px)";
      el.style.transition = "all 2s ease";
      
      done()
      //done是enter方法的原生的引用函数名,这里表示是回调函数,也就是接下来执行的操作aEnter(),消灭延迟效果。 
     },
     aEnter(el){
      this.show = !this.show;
     }
    }
    //这里的el代表,将要执行半场动画的对象,是第一个原生的参数,跟自定义指令的el作用是一样的 
   });
  </script>
</body>
</html>

效果:

vue动画—通过钩子函数实现半场动画操作

补充知识:vue动画只有离场动画,进场动画不生效

存在问题的图:(只有离场动画,进场动画不生效)

vue动画—通过钩子函数实现半场动画操作

解决之后效果图:

vue动画—通过钩子函数实现半场动画操作

解决办法:

在transition标签中加入appear属性

<template>
 <transition mode="out-in" appear>
  <div class="singer-detail">
  </div>
 </transition>
</template>

以上这篇vue动画—通过钩子函数实现半场动画操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript高级程序设计 扩展--关于动态原型
Nov 09 Javascript
JS获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
Bootstrap carousel轮转图的使用实例详解
May 17 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 Javascript
JS面试题中深拷贝的实现讲解
May 07 Javascript
js利用iframe实现选项卡效果
Aug 09 #Javascript
解决vue 退出动画无效的问题
Aug 09 #Javascript
在vue中使用console.log无效的解决
Aug 09 #Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 #Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 #Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 #Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 #Javascript
You might like
php日历[测试通过]
2008/03/27 PHP
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
smarty模板数学运算示例
2016/12/11 PHP
php连接mysql数据库
2017/03/21 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
Jquery选择器 $实现原理
2009/12/02 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
jquery实现图片预加载
2015/12/25 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
Python功能键的读取方法
2015/05/28 Python
在Python中COM口的调用方法
2019/07/03 Python
django框架模板语言使用方法详解
2019/07/18 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
工厂仓管员岗位职责
2014/01/01 职场文书
优秀中学生事迹材料
2014/01/31 职场文书
2014年团委工作总结
2014/11/13 职场文书
河童之夏观后感
2015/06/11 职场文书
校园新闻稿范文
2015/07/18 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
pandas求平均数和中位数的方法实例
2021/08/04 Python
Java数据结构之堆(优先队列)
2022/05/20 Java/Android