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()来创建缓动动画组,创建完成后的结果为: 可以看到上面的缓动动画组有四个原子动画组成.每一个原子动画的信息都包含在里面了. ...
随机推荐
- Solon 小技巧收集 - 页面跳转（重定向）
@XMapping("/") public void jump(XContext ctx){ ctx.redirect("http://www.noear.org&quo ...
- Intellij idea 生成带注释的get/set
自带的 Alt+ Insert 中的 Getter and Setter 生成的属性,不能将 private 字段中的注释带过去,比较尴尬.可以通过两种试. 1. 修改模板:这种方法不能得到 pri ...
- python 解析字节码的相关方法
python代码被解释器执行时分为两步走: 一.python编译器将代码编译成字节码 二.python虚拟机执行字节码 由于这两步是一起的,所以在python编程中很少能看到字节码.但是想要提高代码效 ...
- 使用root ssh登录ubuntu22.4配置
前言 在安装k8s集群时,需要使用root用户ssh登录远程服务器进行安装操作,但是root登录是默认关闭的,因此本篇讲解如何开启配置, 当前测试版本 ubuntu22.4 安装部署 使用管理权限打开 ...
- 非洲 AI 不发达，看看这份PPT，受益匪浅
非洲 AI 不发达,看看这份PPT,受益匪浅 非洲有大量的工程+机器学习人才,他们渴望学习.努力工作和进步. 大家好,我是老章 看到我关注的一位博主在首届非洲 @LangChainAI 聚会上的一个演 ...
- 接口文档 token原理 jwt介绍和原理 drf-jwt快速使用
目录 昨日回顾 认证 权限 频率 全局异常处理 接口文档 接口文档编写 drf自动生成接口文档 cookies-session-token发展史 jwt介绍和原理 jwt的构成 base64的编码和解 ...
- XShell、XFtp免费许可证增强：删除标签限制！
大家好,我是DD! XShell相信大家都不陌生了,作为Windows平台下最强大的SSH工具,是大部分开发者的必备工具.但由于免费许可证的标签限制,有不少开发者会去找破解版使用.虽然功能是可以使用了 ...
- #5702：Solving Order（结构体排序，水题）
原题目链接 题目大意:把颜色由多到少进行排序,从大到小的输出. 解题思路:将变量存在结构体中,然后结构体排序即可.还需要注意格式的问题. 详见代码. #include <iostream> ...
- # 2027 ( 统计元音 ) ：hash应用
Problem Description 统计每个元音字母在字符串中出现的次数. Input 输入数据首先包括一个整数n,表示测试实例的个数,然后是n行长度不超过100的字符串. Output 对于每个 ...
- 一、mysql5.7 rpm 安装（单机）
一.下载需要的rpm包mysql-community-client-5.7.26-1.el6.x86_64.rpmmysql-community-common-5.7.26-1.el6.x86_64. ...