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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
javascript下操作css的float属性的特殊写法
Aug 22 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
小程序实现左滑删除效果
Jul 25 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数据加密详解
2013/06/18 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
PHP云打印类完整示例
2016/10/15 PHP
php封装的page分页类完整实例
2016/10/18 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
基于jQuery实现表单提交验证
2014/11/24 Javascript
js变量提升深入理解
2016/09/16 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
Python中对列表排序实例
2015/01/04 Python
python各种语言间时间的转化实现代码
2016/03/23 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
python学生信息管理系统(初级版)
2018/10/17 Python
在python中bool函数的取值方法
2018/11/01 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
XML文档面试题
2015/08/05 面试题
护士的岗位职责
2013/12/04 职场文书
中层干部岗位职责
2013/12/18 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
python 实现德洛内三角剖分的操作
2021/04/22 Python