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()来创建缓动动画组,创建完成后的结果为: 可以看到上面的缓动动画组有四个原子动画组成.每一个原子动画的信息都包含在里面了. ...
随机推荐
- Solon2 开发之插件，三、插件体外扩展机制（E-Spi）
插件体外扩展机制,简称:E-Spi.用于解决 fatjar 模式部署时的扩展需求.比如: 把一些"业务模块"做成插件包放到体外 把数据源配置文件放到体外,方便后续修改 其中, .p ...
- PPT 动画-旋转唱片
插入图片.同心圆 按Shift 先点击背景图片,再点击 同心圆 合并形状,选择相交 设置动画,选择 陀螺旋,持续时间为 8秒, 打开计时窗口,重复为:直到幻灯片末尾
- LSP 网络劫持（Layered Service Provider Hijacking）
LSP 简介: 分层服务提供商(Layered Service Provider,LSP)是一种可以扩展Winsock作为应用程序的 Windows 的网络套接字工具的机制.Winsock LSP 可 ...
- 用 ChatGPT 写一篇《ChatGPT 会取代我们的工作吗》
自从 ChatGPT 火爆以后,最常谈到的话题就是 ChatGPT 会取代我们的工作吗?在写这篇内容时我有个大胆的想法,那就是让 ChatGPT 来取代我的工作. 首先,我决定直接让 ChatGPT ...
- 在Windows下配置Clang编译器
Preferences Linux & macOS 平台LLVM 相关工具链下载 2019年,在Windows下配置Clang编译器 Visual Studio 2022 中使用 Clang ...
- [kuangbin]专题九 连通图 题解+总结
kuangbin专题链接:https://vjudge.net/article/752 kuangbin专题十二 基础DP1 题解+总结:https://www.cnblogs.com/RioTian ...
- Linux Page Cache调优在Kafka中的应用
本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/MaeXn-kmgLUah78brglFkg作者:Yang Yijun 本文主要描述Linux ...
- 十六、企业级私有仓库harbor
系列导航 一.docker入门(概念) 二.docker的安装和镜像管理 三.docker容器的常用命令 四.容器的网络访问 五.容器端口转发 六.docker数据卷 七.手动制作docker镜像 八 ...
- uni-app 预览pdf文件
安卓uni-app实现pdf文件预览功能: 1.https://mozilla.github.io/pdf.js/getting_started/#download下载 放在根目录下, 2.新建一个w ...
- freeswitch的mod_xml_curl模块动态获取dialplan
概述 freeswitch是一款简单好用的VOIP开源软交换平台. mod_xml_curl模块支持从web服务获取xml配置,本文介绍如何动态获取dialplan配置. 环境 centos:Cent ...