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 相关文章推荐
js 加载时自动调整图片大小
May 28 Javascript
js下用gb2312编码解码实现方法
Dec 31 Javascript
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
JavaScript基本编码模式小结
May 23 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
Dec 05 Javascript
DOM 事件流详解
Jan 20 Javascript
jquery 设置style:display的方法
Jan 29 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 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
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
PHP中for与foreach的区别分析
2011/03/09 PHP
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
php var_export与var_dump 输出的不同
2013/08/09 PHP
laravel5.6实现数值转换
2019/10/23 PHP
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
jQuery事件用法详解
2016/10/06 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
Python创建日历实例
2014/08/21 Python
linux下python抓屏实现方法
2015/05/22 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
通过shell+python实现企业微信预警
2019/03/07 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
行政助理岗位职责范文
2013/12/03 职场文书
主持人演讲稿
2014/05/13 职场文书