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 相关文章推荐
基于jquery循环map功能的代码
Feb 26 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 Javascript
在vue中axios设置timeout超时的操作
Sep 04 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 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脚本的10个技巧(3)
2006/10/09 PHP
PHP 身份验证方面的函数
2009/10/11 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
php中请求url的五种方法总结
2017/07/13 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
Pytorch之Variable的用法
2019/12/31 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
房地产活动策划方案
2014/05/14 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
小孩不笨观后感
2015/06/03 职场文书
教师素质教育心得体会
2016/01/19 职场文书