vue组件中使用<transition></transition>标签过渡动画
2024-10-21 10:05:53
直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!--2. 自定义两组样式,来控制transition 内部的元素实现动画-->
<style>
/*v-enter 是进入之前,元素的起始状态*/
/*v-leave-to 离开之后动画的终止状态*/
.v-enter,.v-leave-to{
opacity: 0;/*透明度*/
transform: translateX(150px);
}
/*入场(离场)动画的时间段 */
.v-enter-active,.v-leave-active{
transition: all 0.8s ease; } .my-enter,.my-leave-to{
opacity: 0;/*透明度*/
transform: translateY(70px);
}
.my-enter-active,.my-leave-active{
transition: all 0.8s ease; }
</style>
</head>
<body> <div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<input type="button" value="toggle2" @click="flag2=!flag2"> <!--1. 使用transition元素把需要被动画控制的元素,包裹起来-->
<transition>
<h3 v-if="flag">这是一个H3</h3>
</transition> <transition name="my"> <!--区分不同组织间动画-->
<h6 v-if="flag2">这是一个H6</h6>
</transition>
</div> <script>
var vm = new Vue({
el : '#app',
data : {
flag : false,
flag2 : false,
},
methods : { },
}); </script>
</body>
</html>
最新文章
- spring加载过程,源码带你理解从初始化到bean注入
- golang 格式化时间为字符串
- Android多点触控技术实战,自由地对图片进行缩放和移动
- centos6.5安装mysql记录
- angularJS之$apply()方法
- 【HDOJ】4326 Game
- @property属性关键字
- memcached学习笔记——存储命令源码分析下篇
- javascript 将递归转化为循环
- linux 架设 postfix 邮件服务器
- 面向对象编程之super内置函数的用法
- 编写一个js函数,该函数有一个n(数字类型),其返回值是一个数组,该数组内是n个随机且不重复的整数,且整数取值范围是[2,32]
- mysql_事物
- 为什么fork()2次会避免产生僵尸进程
- 3d模型 手办制作 3d model manual production
- postgresql-tps
- 新浪安装weiphp2.0的方法
- fork(), waitpid()
- oraclejdbc
- java 数据结构与算法---二叉树