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 ...
随机推荐
- 阶段3 2.Spring_02.程序间耦合_8 工厂模式解耦的升级版
遍历枚举 改造获取的方法,这样获取的对象就是单例模式 再次运行测试程序 对象只有一个实例的情况下对i这个值进行了反复的操作.当多个人活着多线程在使用时.这就会出现类成员变量由于第一个人的修改.后面看到 ...
- Jenkins pipeline+Maven+Gitlab
参照文档:http://www.cnblogs.com/xiaodai12138/p/9996995.html
- 转载-c++深拷贝和浅拷贝
转载自:https://blog.csdn.net/u010700335/article/details/39830425 C++中类的拷贝有两种:深拷贝,浅拷贝:当出现类的等号赋值时,即会调用拷贝函 ...
- python3下import MySQLdb出错问题
原因:python2下是使用的MySQLdb,python3下用的是pymysql 安装 pip install pymysql
- 由于SID连接不匹配，监听器拒绝连接。
java.sql.SQLException: Listener refused the connection with the following error:ORA-12505, TNS:liste ...
- Python学习之协程
8.8 协程 我们都知道线程间的任务切换是由操作系统来控制的,而协程的出现,就是为了减少操作系统的开销,由协程来自己控制任务的切换 协程本质上就是线程.既然能够切换任务,所以线程有两个最基本的 ...
- Git提示要输入密码
在服务器上Git pull或者push时,一直提示要输入密码,但这个密码又不是Gitlab账户的密码,经过同学指点,原来是项目主分支被保护起来了,处于protected的状态,因为目前只有我一个人 在 ...
- HTML笔记(一) 基础标签的介绍
一个最基本的html文件,必须包含<html>, <head> 和<body> 三个标签 以及<!doctype>声明 1. <!DOCTYPE& ...
- [转帖]Linux网络管理员不得不了解的系统目录/proc/sys/net/(网络配置)
Linux网络管理员不得不了解的系统目录/proc/sys/net/(网络配置) https://blog.csdn.net/u013485792/article/details/76416836 需 ...
- [转帖]小米手环采用RISC-V 指令集芯片
小米手环4或用“黄山一号”芯片,雷军再回前线,未来走向如何 静心科技 06-1111:19 忘记来源地址了 不过国内的很多东西都是有中国特色的 比如飞腾 比如麒麟(银河麒麟 还有华为的麒麟 980) ...