Vue的css动画原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css动画原理</title>
<script src="../js/vue.js"></script>
<!--官网：https://cn.vuejs.org/v2/guide/transitions.html#CSS-%E5%8A%A8%E7%94%BB-->
<style>
.fade-enter, /*进入过渡的开始状态*/
.fade-leave-to{ /*离开过渡的结束状态*/
opacity: 0;
}
.fade-enter-active, /*进入过渡生效时的状态*/
.fade-leave-active{ /*离开过渡生效时的状态*/
transition: opacity .5s;
}
.slide-fade-enter-active{ /* 设置持续时间和动画函数 */
transition: all .3s ease;
}
.slide-fade-leave-active{
transition: all .8s cubic-bezier(1.0,0.5,0.8,1.0);
}
.slide-fade-enter,.slide-fade-leave-to{
transform: translateX(10px);
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<button @click="btnClick">change</button>
<transition name="fade">
<div v-if="show">hello</div>
</transition>
<hr>
<transition name="slide-fade">
<div v-if="show">hello</div>
</transition>
</div>
<script>
vm = new Vue({
el: '#app',
data: {
show:true
},
methods:{
btnClick:function () {
this.show = !this.show
}
}
})
</script>
</body>
</html>
Vue的css动画原理的更多相关文章
- vue中css动画原理
显示原理: <transition name='fade'> <div v-if='show'>hello world</div> </transition& ...
- vue css动画原理
从隐藏到显现 从显现到隐藏 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 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 中的动画特效
Vue 中的动画特效 CSS 实现标签显隐 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- CSS动画小结
CSS动画 原理:1.画面之间变化 2.视觉暂留作用 常见问题 1.CSS 动画的实现方式有几种 1.transition 2. keyframes(animation) 2.过渡动画和关键帧动画 ...
- vue 动画原理 part1
Vue动画原理 增加和删除css增加样式实现一个过渡效果也就是动画效果 1.需要动画效果的标签外包裹一个transition标签 会被自动分析css样式,然后自动构建一个动画流程 transition ...
随机推荐
- java.lang.ClassNotFoundException: org.apache.commons.collections.FastHashMap
七月 26, 2017 1:52:15 上午 org.apache.catalina.core.StandardWrapperValve invoke严重: Servlet.service() for ...
- SpringMVC以POST提交表单中文乱码解决方案。
在web.xml中添加字符集过滤器: <filter> <filter-name>characterEncodingFilter</filter-name> < ...
- 主机加固之win7
这套主机加固方案很简单,一步一步按着顺序来弄就可以,部分步骤还配有相关图片.可以先用虚拟机来做一次加固,以防弄错后不好恢复.记得弄个快照,以防万一.下次有空写个win7暴力破解~ 1. 配置管理 1. ...
- 病毒分析(三)-利用Process Monitor对熊猫烧香病毒进行行为分析
前两次随笔我介绍了手动查杀病毒的步骤,然而仅通过手动查杀根本无法仔细了解病毒样本的行为,这次我们结合Process Monitor进行动态的行为分析. Process Monitor Process ...
- USACO4.3 Buy Low, Buy Lower【简单dp·高精度】
如果没有方案数的话,这道题水的不得了,裸的最长下降子序列. 但是它有方案数,所以... 一个是方案数的求法: 设$f[i]$是以$a[i]$结尾的最长下降子序列的长度,可以$n^2$$dp$出答案 如 ...
- http 协议里的 200、301、302、401、403、405、500 分别代表什么？
http 协议里的 200.301.302.401.403.405.500 分别代表什么? 详细描述: 打开某些网页时,无法正常打开,出现 200.301.302.401.403.405.500 这此 ...
- idea工具
1. 使用IntelliJ IDEA 配置JDK(入门) https://blog.csdn.net/nobb111/article/details/77116259 2. idea 调试快捷键 ...
- Git介绍、安装、命令和实战
一.Git介绍 Git是一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本管理. 二.Git安装(Mac系统) 在Git官网下载安装包双击直接安装 在终端输入git来检测Git ...
- JDBC的一些简单通用代码
JDBC的一些简单通用代码 功能包括 连接数据库 查询操作 执行sql语句 jdbc相关类的加载 关闭连接 获取数据库格式的当前时间 代码 package dao; import java.sql.C ...
- Mysql 事件记录 | performance_schema全方位介绍
Mysql 事件记录 | performance_schema全方位介绍 | 导语 在上一篇 初相识|performance_schema全方位介绍 中,我们详细介绍了performance_sche ...