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

2024-10-03 15:06:58

注意：

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动画只有离场动画，进场动画不生效

存在问题的图：（只有离场动画，进场动画不生效）

解决之后效果图：

解决办法：

在transition标签中加入appear属性

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

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

使用vue实现各类弹出框组件

简单介绍一下vue中常用dialog组件的封装: 实现动态传入内容,实现取消,确认等回调函数. 首先写一个基本的弹窗样式,如上图所示. 在需要用到弹窗的地方中引入组件: import dialogBar from './dialog.vue' components:{ 'dialog-bar': dialogBar, }, <dialog-bar></dialog-bar> 点击一个按钮显示弹窗,并保证关闭弹窗后再次点击依旧显示在弹窗组件中定义一个value值:v-model=&
vue中keep-alive、activated的探讨和使用详解

在修改公司的一个项目的时候发现了activated这个东西,一直觉得很疑惑,之前也没怎么用过啊!官网的生命周期那也没说过这东西啊!生命周期不就create mount update 和destory这几个东东么,怎么多了个activate出来. 百思不得其解,于是去问了下度娘和查了下文档!恍然大悟,原来这东东是结合keep-alive这东东使用的,下面顺便记录一下. keep-alive <keep-alive>包裹动态组件的时候,会缓存不活动的组件实例,而不是摧毁他们.其是一个抽象的组件,自
vue实现消息的无缝滚动效果的示例代码

朋友的项目里要实现一个消息无缝滚动的效果,中途遇到了一点小bug,每组消息滚动完再次循环时会出现停留两倍的时间间隔问题,我研究了一天终于解决了这个1S的小问题项目环境vue-cli ,请自行配置好相应的,环境及路由,这里主要介绍实现的方法第一步在模板中使用v-for方法循环出消息列表 <template> <div id="box"> <ul id="con1" ref="con1" :class="
Vue.js实现tab切换效果

Vue是一个小巧轻便的JavaScript库.它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷.实际上,一直让Vue引以为豪的是它的便捷性.执行力.灵活性. 目前在学习Vue.js.在学习的时候需要把手动操作DOM的思维去掉,因为Vue是数据驱动,不需要手动操作DOM.他通过一些特殊的hmtl语法,将DOM和数据绑定起来.一旦创建了绑定,DOM就会和数据保持同步,每当变更了数据,DOM也会相应的发生改变,更新. 下面是我用vue.js来实现的tab切换功能. <!--这里
vue动画—通过钩子函数实现半场动画操作

注意: 1.起始位置设置了一个(0,0)在第一遍执行时,是没有作用的.在一次入场动画执行完成之后,在最终位置停下来并不在起始位置,通过这里的位置的设置可以将入场动画结束时的位置调到这里 2.理解enter()函数的el的指代对象和done()指代的回调函数 3.理解this.show = !this.show,这句话有两个作用.一是:控制显示和隐藏,二是:false -> true为半场动画,true->false又是为另半场动画.这样就能完成一直循环执行半场动画的效果了. HTML代码: &
vue实现跳转接口push 转场动画示例

1.index.js 配置子路由children. import Vue from 'vue' import Router from 'vue-router' import SingerDetail from 'components/singer-detail/singer-detail' Vue.use(Router) export default new Router({ routes: [ { path: '/', redirect: '/recommend' }, { path: '/s
聊聊vue生命周期钩子函数有哪些,分别什么时候触发

目录 vue生命周期钩子函数以下为详解版生命周期mounted和activated使用.踩坑 activated mounted 踩坑 vue生命周期钩子函数 vue生命周期即为一个组件从出生到死亡的一个完整周期主要包括以下4个阶段:创建,挂载,更新,销毁创建前:beforeCreate, 创建后:created 挂载前:beforeMount, 挂载后:mounted 更新前:beforeUpdate, 更新后:updated 销毁前:beforeDestroy, 销毁后:destro
Vue指令的钩子函数使用方法

在Vue 中可以把一系列复杂的操作包装为一个指令. 什么是复杂的操作? 我的理解是:复杂逻辑功能的包装.违背数据驱动的 DOM 操作以及对一些 Hack 手段的掩盖等.我们总是期望以操作数据的形式来实现功能逻辑. 钩子函数对于自定义指令的定义,Vue2 有 5 个可选的钩子函数. bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作. inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中).
解决Vue中mounted钩子函数获取节点高度出错问题

遇到的问题最近在开发一个Vue的项目,好几个页面都有用到一个页面楼层滑动的组件,我就直接封装成了一个,但是遇到一个bug,就是我需要得到这个组件的offsetTop,然后页面滚动到这个位置的时候,就设置position属性为fixed,让他固定在屏幕上.问题是当我在mounted钩子函数中获取offsetTop的时候,在新开的页签中打开页面,会得到错误的offsetTop,但是在当前页面刷新,就不会有问题. 定位问题后来查到问题,就是加载的问题,新窗口打开图片,默认是没有带缓存的,图片是G
vue.js动画中的js钩子函数的实现

在transition中还可以通过设置javascript钩子函数,实现自定义动画效果. 以实现击球效果为例: 击球代码解析:  <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" > <img v-show="flag" class="ba
详解Vue源码学习之callHook钩子函数

Vue实例在不同的生命周期阶段,都调用了callHook方法.比如在实例初始化(_init)的时候调用callHook(vm, 'beforeCreate')和callHook(vm, 'created'). 这里的"beforeCreate","created"状态并非随意定义,而是来自于Vue内部的定义的生命周期钩子. var LIFECYCLE_HOOKS = [ 'beforeCreate', 'created', 'beforeMount', 'mount
vue parseHTML函数源码解析start钩子函数

目录正文 platformGetTagNamespace 源码 isForbiddenTag 函数 addIfCondition是什么 processIfConditions 源码正文接上章节:parseHTML 函数源码解析 AST 预备知识现在我们就可以愉快的进入到Vue start钩子函数源码部分了. start: function start(tag, attrs, unary) { // check namespace. // inherit parent ns if ther
IOS实战之自定义转场动画详解

转场动画这事,说简单也简单,可以通过presentViewController:animated:completion:和dismissViewControllerAnimated:completion:这一组函数以模态视图的方式展现.隐藏视图.如果用到了navigationController,还可以调用pushViewController:animated:和popViewController这一组函数将新的视图控制器压栈.弹栈. 下图中所有转场动画都是自定义的动画,这些效果如果不用自定义动
实例讲解iOS中的CATransition转场动画使用

一.简介 CATransition是CAAnimation的子类,用于做转场动画能够为图层提供移出屏幕和移入屏幕的动画效果.iOS比Mac OS X的转场动画效果少一点如:UINavigationController导航控制器就是通过CATransition转场动画实现了将控制器的视图推入屏幕的动画效果 CATransition头文件动画属性: type:动画过渡类型 subtype:动画过渡方向 startProgress:动画起点(在整体动画的百分比) endProgress:动画终点

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

相关推荐

随机推荐