vue动画进入-完整的动画/有进入离开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue.js"></script>
<style>
/*
v-enter 这是进入之前;元素的起始状态;此时还没有开始进入
v-leave-to 是动画离开之后;离开的终止状态;此时元素的动画已经结束
.v-enter-active 入场动画的时间段
.v-leave-active 离场动画的时间段
*/
h3 {
width: 200px;
}
.v-enter,
.v-leave-to {
opacity: 0.8;
/* 说明起始状态是在右侧80px处的 */
transform: translateX(200px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.6s ease;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="toggle" @click="toggle">
<transition>
<!-- transition是vue官方提供的 使用transition元素 把需要被动画控制的元素 包裹起来哦 -->
<h3 v-show="flag">这是内容</h3>
</transition>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: false
},
methods: {
toggle() {
this.flag = !this.flag;
}
},
})
</script>
</body>
</html>
<style>
/* v-enter 这是进入之前 元素的起始状态 此时还没有开始进入
v-leave-to 是动画离开之后 离开的终止状态 此时 元素的动画已经结束
.v-enter-active 入场动画的时间段
.v-leave-active离场动画的时间段
*/
.my-enter,.my-leave-to{
opacity: 0;
transform: translateY(80px);
}
.my-enter-active,.my-leave-active{
transition: all 0.6s ease;
}
</style>
<div id="app">
<input type="button" value="toggle2" @click="toggle">
<transition name="my"> <!-- 这就是自定义的前缀名称 表示my开发实现自定义的动画-->
<!-- transition是vue官方提供的 使用transition元素 把需要被动画控制的元素 包裹起来哦 -->
<h3 v-if="flag2">这是内容</h3>
</transition>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
flag:false,
flag2:false
},
methods: {
toggle(){
this.flag2=!this.flag2;
}
},
})
</script>
vue动画进入-完整的动画/有进入离开的更多相关文章
- Vue.js 相关知识（动画）
1. 简介 Vue 在插入.更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:&l ...
- Vue使用过渡类名实现动画和自定义前缀
Vue使用过渡类名实现动画和自定义前缀 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> ...
- vue.js加入购物车小球动画
生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画 动画的内容分别是外层和内层,外层控制动画小 ...
- 黑马vue---46、vue使用过渡类名实现动画
黑马vue---46.vue使用过渡类名实现动画 一.总结 一句话总结: vue动画的过渡类名的时间点中没有设置样式的话就是默认的样式 使用 transition 元素,把 需要被动画控制的元素,包裹 ...
- vue移动端转场动画
vue移动端转场动画 1.介绍:使用vue移动端做项目的时候,为了用户的体验良好,我们需要页面有一种进入和转出的效果 // 在App.vue根组件中 <template> <div ...
- 动画---图形图像与动画(三)Animation效果的XML实现
使用XML来定义Tween Animation 动画的XML文件在工程中res/anim目录,这个文件必须包含一个根元素,可以使<alpha><scale> <trans ...
- 动画(Animation) 、 高级动画(Core Animation)
1 演示UIImage制作的动画 1.1 问题 UIImage动画是IOS提供的最基本的动画,通常用于制作一些小型的动画,本案例使用UIImage制作一个小狗跑动的动画,如图-1所示: 图-1 1.2 ...
- iOS开发——动画篇Swift篇&动画效果的实现
Swift - 动画效果的实现 在iOS中,实现动画有两种方法.一个是统一的animateWithDuration,另一个是组合出现的beginAnimations和commitAnimation ...
- CoreAnimation4-隐式动画和显式动画
事务 Core Animation基于一个假设,说屏幕上的任何东西都可以(或者可能)做动画.动画并不需要你在Core Animation中手动打开,相反需要明确地关闭,否则他会一直存在. 当你改变CA ...
- jQuery-1.9.1源码分析系列（十五） 动画处理——缓动动画核心Tween
在jQuery内部函数Animation中调用到了createTweens()来创建缓动动画组,创建完成后的结果为: 可以看到上面的缓动动画组有四个原子动画组成.每一个原子动画的信息都包含在里面了. ...
随机推荐
- 一文详解Java日志框架JUL
摘要:JUL(Java util logging),Java原生日志框架,不需要引入第三方依赖包,使用简单方便. 本文分享自华为云社区<Java 日志框架 JUL 详解大全>,作者: 陈皮 ...
- Solon 拉取 maven 包很慢或拉不了，怎么办？
注意:如果在 IDEA 设置里指定了 settings.xml,下面两个方案可能会失效.(或者直接拿"腾讯" 的镜像仓库地址,按自己的习惯配置) 1.可以在项目的 pom.xml ...
- PPT 动画-滚动数字
插入一个文本框,输入 0~9 调整边框大小,使其竖着排列 页面切换,选择平滑
- PPT MBE风格的插画
两种或多种不同的图形,通过合并形状等一些操作叫布尔运算 渐变模式 线性渐变:几个不同的颜色[垂直] 射线渐变:圆形弧度的渐变 矩形渐变:矩形 路径渐变:中心形状和外面形状保持一致 渐变方向 射线渐变方 ...
- Jenkins Pipeline 流水线 - 使用代理节点，Remote SSH 对 K8S 进行升级
Jenkins Pipeline 流水线 - K8S kubectl 升级 使用代理节点 Remote SSH 远程执行命令进行升级 Remote SSH 方式 安装插件 SSH Pipeline S ...
- Sublime Text 16进制显示
大文件推荐使用 UltraEdit 工具 Sublime Text 16进制显示(可以直接显示不同数据类型转换后的结果,不用在线工具,转二进制了) 安装 HexViewer 插件 1. Ctrl + ...
- auth认证模块 auth_user表扩展
目录 auth认证模块前戏 django后台管理功能 创建超级管理员 auth认证相关模块及操作 用户注册 用户登录 网站首页效果 校验用户登录的装饰器 用户修改密码 用户注销登录 auth_user ...
- 只需 3 步，人人都能搭建自己的 chatgpt 微信机器人
大家好,我是徐公,大厂 6 年经验,CSDN 博客专家.最近,ChatGpt 很火,身边的人都在讨论,会不会成为下一个风口,像前几年互联网一样,迎来井喷式的发展. 徐公我最近也是在密切关注,最近,在 ...
- 安装vue脚手架@vue/cli 4.5.13(稳定版)
若 NPM 下载过慢,请参考本处改换镜像源:Here 首先新建一个 vue 测试项目,还记得以前自己是用 vue-cli 2.0的版本 去构建的,毕竟里面有默认配置好的webpack配置,但现在很多小 ...
- C# 序列化器
理论知识: 序列化是指将对象转换成字节流,从而存储对象或将对象传输到内存.数据库或文件的过程. 它的主要用途是保存对象的状态,以便能够在需要时重新创建对象. 反向过程称为"反序列化" ...