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()来创建缓动动画组,创建完成后的结果为: 可以看到上面的缓动动画组有四个原子动画组成.每一个原子动画的信息都包含在里面了. ...
随机推荐
- 一起玩转玩转LiteOS组件：Opus
摘要:Opus编码器是一个开源的有损声音编码格式,适用于网络实时声音传输,标准格式为RFC 6716,相对于其他编码格式来说,保真性更好. 本文分享自华为云社区<LiteOS组件尝鲜-玩转Opu ...
- “数”驰天下，华为云DRS 高效支撑T3出行平稳迁移
摘要:华为云DRS成功助力T3出行在规定时间内完成数十TB级全量数据的迁移. 数字化潮流浩浩汤汤,企业上云如火如荼,网约车行业也借助这一股东风展现出了蓬勃的生命力,因为它的高效便捷,吸引了越来越多的都 ...
- Datahub新版本0.9.1更新，列级别数据血缘功能发布！
大家好,我是独孤风. 近期Datahub进行了一次大的版本更新,从0.9版本以后Datahub也正式发布了列级别数据血缘的功能. 0.9.1版本又增加了,列的影响分析这个功能. 这样Datahub对于 ...
- 从应用看火山引擎 AB 测试 (DataTester) 的最佳实践
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 本文将从外部用户的角度介绍 A/B 测试平台的最佳实践.分享分为四部分,首先整体介绍 A/B 测试的应用场景,接下 ...
- 文件名: ?Ciwindows\system32 inetsrconfiglapplicationHost.config 错误:无法写入配置文件
出现原因:出现这个问题,一般是在程序运行的时候更新程序,导致的. 解决方案: Microsoft Windows [版本 6.3.9600] (c) 2013 Microsoft Corporatio ...
- Neo4j Neo.TransientError.General.MemoryPoolOutOfMemoryError
The allocation of an extra 4.0 MiB would use more than the limit 2.0 GiB. Currently using 2.0 GiB. d ...
- Flask小知识集合
全局变量g的使用 flask在上下文中提供了四种变量,分别是: 变量名 上下文 说明 current_app 应用上下文 当前激活程序的程序实例 g 应用上下文 处理请求时用作临时存储的对象.每次请求 ...
- 不可不看的Java基础知识整理，注释、关键字、运算符
写在开头 万丈高楼平地起,要想学好汉语首先学拼音,想学好英语首先学26个字母,对于编程语言来说,一样的道理,要想学好必须先掌握其基础语法和知识,今天我们就来唠一唠Java语言中那些出现频率极高,又很基 ...
- 数据探索之道：查询Web API数据中的JSON字符串列
前言 在当今数据驱动的时代,对数据进行探索和分析变得愈发关键.Web API作为广泛应用的数据源,提供了丰富的信息和资源.然而,面对包含JSON字符串列的Web API数据时,我们常常遇到一个挑战:如 ...
- Python 使用pip或easy_install或手动安装库/模块/软件包
pip是easy_install的改进版,提供更好的提示信息,删除package等功能.老版本的python中只有easy_install,没有pip.本文主要介绍使用pip或easy_install ...