047——VUE中css过渡动作实例
2024-09-01 06:06:13
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>css过渡动作实例:</title>
<script src="vue.js"></script>
</head>
<body>
<!--
隐藏和显示的动作:
v-enter:
v-enter-active
v-enter-to v-leave:
v-leave-active:
v-leave-to:
-->
<div id="hdcms">
<button @click="type=!type">显示/隐藏</button>
<transition name="hd">
<h1 v-if="type">http://www.baidu.com百度一下就知道</h1>
</transition>
</div> <script>
new Vue({
el: "#hdcms",
data:{
type:false
}
});
</script>
<style>
.hd-enter,.hd-leave{
opacity: 0;
}
.hd-enter-to{ }
.hd-enter-active{
transition:all 3s;
color: red;
}
.hd-leave-active{
transition: all 3s;
color: green;
} </style>
</body> </html>
最新文章
- diff和patch配合使用(转载备用)
- Linux大文件分割split和合并cat使用方法
- 一步步学Mybatis-搭建最简单的开发环境-开篇(1)
- UVa 11292 The Dragon of Loowater 勇者斗恶龙
- ASP.NET 模板引擎 - NVelocity
- Boost.Build 简明教程
- 嵌套repeater
- 201521123016《Java程序设计》第12周学习总结
- 企业网盘: Owncloud 搭建
- Spark ML源码分析之二 从单机到分布式
- 自学Python,新手上路,好资源免费分享
- [三]基础数据类型之Integer详解
- 我的Spark SQL单元测试实践
- 跟随我在oracle学习php(18)
- Docker构建JDK环境
- Flask最强攻略 - 跟DragonFire学Flask - 第二篇 Flask 中的 Render Redirect HttpResponse
- FreeRTOS学习笔记--任务优先级
- 【Codeforces 1120C】Compress String
- 【JMeter】插件安装
- PHP指针相关函数
热门文章
- DNS named. bind linux (ACL/View)---dnsmasq-with docker,hosts in docker.
- Python3、Unicode、UTF-8、编码
- C++ new 长度为0的数组
- 不登录到MySQL执行SQL语句
- MapReduce中的Shuffle和Sort分析
- Incorrect datetime value
- jquery map方法使用示例
- python selenium webdriver方法封装(find_element_by)
- #C++初学记录(高精度运算)(加法)
- mysql索引之主键索引