Vue css过渡 和 js 钩子过渡
css过渡
<transition name="slide">
<div v-show="!showChatInput" class="slide-footer" @click="showChatInput = !showChatInput" >回复</div>
</transition>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-enter-active,
.slide-leave-active{
transition: all 1s ease;
}
.slide-enter, .slide-leave-to {
transform: translateY(100%);
opacity: 0;
}
.slide-enter-to, .slide-leave {
transform: translateY(0);
opacity: 1;
}
xx-enter-active,xx-leave-active 是进入和离开的整个过程 设置过渡时间即可
xx-enter,xx-leave-to 是 进入前 和离开后的状态(对于简单的过渡,从下面滑入滑出,进入前和和离开后 本身就是同一状态 所以可以写一个样式)
xx-enter-to,xx-leave 是 进入后和离开前的状态
js 钩子函数过渡
<transition v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"> <com></com> // 某某过渡组件
</transition>
// --------
// 进入中
// -------- beforeEnter: function (el) {
// ...
el.style.transform = 'translateY(100%)'
el.style.opacity = 0
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
enter: function (el, done) {
// ...
el.offsetWidth
el.style.transform = 'translateY(0)'
el.style.opacity = 1
el.style.transition = 'all 1s ease'
done()
},
afterEnter: function (el) {
// ...
this.footerHeight = '350px'
},
enterCancelled: function (el) {
// ...
}, // --------
// 离开时
// -------- beforeLeave: function (el) {
// ...
console.log('beforeleave')
// el.style.transform = 'translateY(0)'
// el.style.opacity = 1
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
leave: function (el, done) {
// ...
console.log('leave')
setTimeout(() => {
// el.offsetWidth
el.style.transform = 'translateY(100%)'
el.style.opacity = 0
el.style.transition = 'all 20s ease'
done()
}) },
afterLeave: function (el) {
// ...
this.footerHeight = '40px'
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
重点:
el.offsetWidth 是用来重绘页面的 不加上这句话 没有过渡效果 也可以用setTimeout((=>{}))
Vue css过渡 和 js 钩子过渡的更多相关文章
- vue.js之过渡动画
vue提供了一个封装动画的组件 <transition name="tr"></transition>,将需要执行动画的元素包裹在该组件中,在通过css修改 ...
- 四、Vue过渡与动画、过渡css类名、自定义指定、过滤器
一.过渡 动画 1.1简单的过渡动画使用 parent.vue [0]定义一个待显示的数据 [1]定义一个显示隐藏flag [2]使用动画过滤标签,name用来连接style样式:v-show用来控制 ...
- vue总结 04过渡--进入/离开 列表过渡
进入/离开 & 列表过渡 概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CS ...
- Web高性能动画及渲染原理(1)CSS动画和JS动画
目录 一. CSS动画 和 JS动画 1.1 CSS动画 1.2 JS动画 1.3 小结 二. 使用Velocity.js实现动画 示例代码托管在:http://www.github.com/dash ...
- 高性能Web动画和渲染原理系列(1)——CSS动画和JS动画
[摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...
- vue开发工具node.js及构建工具webpack
1.概念 node.js:可以运行JavaScript的服务平台,可以把它当做一个后端程序,只是它的开发语言是JavaScript (通常情况下,JavaScript的运行环境都是浏览器,因此Java ...
- vue 项目实战 (生命周期钩子)
开篇先来一张图 下图是官方展示的生命周期图 Vue实例的生命周期钩子函数(8个) 1. beforeCreate 刚 new了一个组件,无法访问到数据和真实的do ...
- CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. ...
- vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) var path = require('path') ...
随机推荐
- When you received Ubuntu...
翻译软件 Goldendict 安装命令: sudo apt install goldendict 在 dit -> Dictinoaries -> Websites 中添加有道的链接: ...
- 题解-[SDOI2014]数数
[SDOI2014]数数 这题的前置知识是AC自动机和dp,前置题目是 [JSOI2007]文本生成器,前置题目我写的题解 题解-[JSOI2007]文本生成器.我的讲解假设你做过上面那道题. 这题比 ...
- k8s遇见的问题
open /etc/docker/certs.d/registry.access.redhat.com/redhat-ca.crt: no such file or directory 解决方案 ...
- 教你30秒解开手机的密码 适用于高通CPU
教程简介 先将手机进入9008模式.进入方法请自己百度. 进入9008方法如下: 先将手机关机,然后按住音量加和音量减不松手. 使用教程: 将数据线拆入电脑.会出现一个端口 出现端口后可以松开 ...
- 密码管理平台ratticdb的部署,在centos7上的部署
一,前言 一直想用ratticdb这个有web界面的密码管理工具,百度了一下居然没有找到中文的部署文档,访问官网也是notfound.找到了官方的部署指南:https://github.com/til ...
- day111:MoFang:邀请好友流程&生成邀请好友二维码&第三方应用识别二维码&本地编译测试&记录邀请人信息
目录 1.邀请业务逻辑流程图 2.邀请好友-前端 3.邀请好友-后端接口(生成二维码) 4.前端获取后端生成的二维码 5.前端长按页面,保存图片到相册 6.客户端通过第三方识别微信二维码,服务端提供对 ...
- Missing Private key解决方案——IOS证书 .cer 以p12文件以及配置方案
一个苹果证书怎么多次使用--导出p12文件 为什么要导出.p12文件 因为苹果规定 .cer证书只能存在于一台机器上,因此 如果另一台电脑想要用的话,需要导出为.p12 file ,安装到另一台没有安 ...
- HCIP --- BGP实验
实验拓扑: 要求: R1.R2是EBGP关系,R2.R4是IBGP关系,R4.R5是EBGP邻居关系 R1与R5的环回可以通信 1.配置IP地址 2.BGP承载与IGP之上,所以给AS 2 启用IGP ...
- MSSQL数据库一对多和多对一查询的转换
前言 处理一对多关系,有两种方式 (1)创建关系表,将对应关系保存在物理表中. (2)表中添加一个字段,将多关系的值以特殊符号隔开进行保存. 本例使用的就是,以逗号隔开(InterestID='1,2 ...
- 基于frp的内网穿透实例2-通过自定义域名访问部署于内网的 web 服务
原文地址:https://wuter.cn/1837.html/ 一.想要实现的功能 1.将部署在自己电脑上的网站用于公网访问. 2.将未备案域名解析至国内服务器(即我宿舍的老母鸡上). 二.服务端配 ...