vue css动画原理
从隐藏到显现
从显现到隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue中的动画</title>
<style>
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 3s;
} </style>
</head>
<body>
<div id="app">
<transition name="fade">
<div v-if="show">hello world</div>
</transition>
<button @click="handleBtnClick">change</button>
</div> <!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript"> var app = new Vue({
el: '#app',
data: {
show: true
},
methods: {
handleBtnClick: function() {
this.show = !this.show;
}
}
}) </script>
</body>
</html>
动画由transition标签包裹，class中的名字由transition的name属性来定，例如name = "fade",则class名为.fade-enter,如果没有name,则默认class名为v-, 例如.v-enter, .v-enter-active
vue css动画原理的更多相关文章
- Vue的css动画原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中css动画原理
显示原理: <transition name='fade'> <div v-if='show'>hello world</div> </transition& ...
- CSS动画原理及硬件加速
一.图层 图层即层叠上下文,具体概念和应用大家可以看我之前转自张鑫旭大神博客的<CSS层叠上下文和层叠顺序>,这里我们简单复习一下产生层叠上下文的原因. 1.根层叠上下文 指的是页面根元素 ...
- 36纯 CSS 动画原理，在页面上表现日蚀现象
原文地址:https://segmentfault.com/a/1190000015070543 感想: 动画,背景颜色 HTML code: <div class="sky" ...
- 如何利用 CSS 动画原理，在页面上表现日蚀现象
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OELvrK 可交互视频教 ...
- 前端每日实战：36# 视频演示如何利用 CSS 动画原理，在页面上表现日蚀现象
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OELvrK 可交互视频教程 此视频 ...
- vue css动画
.toggle-cart-enter-active, .toggle-cart-leave-active { transition: all .3s ease-out; } .toggle-cart- ...
- CSS动画小结
CSS动画 原理:1.画面之间变化 2.视觉暂留作用 常见问题 1.CSS 动画的实现方式有几种 1.transition 2. keyframes(animation) 2.过渡动画和关键帧动画 ...
- vue 动画原理 part1
Vue动画原理 增加和删除css增加样式实现一个过渡效果也就是动画效果 1.需要动画效果的标签外包裹一个transition标签 会被自动分析css样式,然后自动构建一个动画流程 transition ...
随机推荐
- eclipse远程调试Tomcat方法（转）
转自:http://blog.csdn.net/afgasdg/article/details/9236877 1.Linux中配置tomcat在catalina.sh中添加如下CATALINA_OP ...
- CSIC_716_20191224【python基础结课作业--仿优酷练习】
需 求:********管理员界面******** 1 注册 2 登录 3 上传视频 4 删除视频 5 发布公告 ********普通用户界面******** 1 注册 2 登录 3 冲会员 4 查看 ...
- Mybatis基于XML配置SQL映射器(三)
Mybatis之动态SQL mybatis 的动态sql语句是基于OGNL表达式的.可以方便的在 sql 语句中实现某些逻辑. 总体说来mybatis 动态SQL 语句主要有以下几类: if choo ...
- POJ 2251 Dungeon Master（dfs）
Description You are trapped in a 3D dungeon and need to find the quickest way out! The dungeon is co ...
- haproxy笔记
haproxy安装.启动.日志配置 方法1:#安装 yum install haproxy -y #日志配置 sed -i 's/^#$ModLoad imudp/$ModLoad imudp/g' ...
- angularjs $index用来取顺序
$index用来取顺序 null
- 用Node编写RESTful API接口
前言 本文将通过一个todo list前后端分离的小项目来讲解如何用Node创建符合RESTful风格的API接口. 创建HTTP服务器 我们先来了解下如何用Node创建HTTP服务器(熟悉的读者可以 ...
- 学号 20175223 《Java程序设计》第10周学习总结
目录 教材学习内容总结 代码调试中的问题和解决过程 1. XAMPP无法启用 MySQL 程序. 2. Ubuntu 无法下载或更新. [代码托管] 学习进度条 参考资料 目录 教材学习内容总结 第十 ...
- 查看mysql慢日志，进行优化
MySQL 慢查询的相关参数解释:slow_query_log :是否开启慢查询日志,1表示开启,0表示关闭. slow_query_log :是否开启慢查询日志,1表示开启,0表示关闭. lo ...
- windbg show args after breakpoint
bp ntdll!NtOpenFile ".echo ####################;du poi(ebp+8);.echo ########################;&q ...