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：Hibernate框架1（环境搭建，Hibernate.cfg.xml中属性含义，Hibernate常用API对象，HibernteUitl，对象生命周期图，数据对象的三种状态，增删查改）
1.环境搭建: 三个准备+7个步骤 准备1:新建项目并添加hibernate依赖的jar文件 准备2:在classpath下(src目录下)新建hibernate的配置文件:hibernate.cf ...
- CentOS7中SSH免密登陆设置
一.准备三台客户机 hadoop100 192.168.13.100(Master) hadoop101 192.168.13.101 hadoop102 192.168.13.102 二.在hado ...
- Shell编程、part2
本节内容 1. shell变量简介 2. 定义变量 3. 使用变量 4. 修改变量的值 5. 单引号和双引号的区别 6. 将命令的结果赋值给变量 7. 删除变量 8. 变量类型 9. 特殊变量列表 1 ...
- 最大公约数与最小公倍数C++实现
最大公约数为辗转相除法求得, 最小公倍数为两数之积与最大公约数的比值 #include<iostream> using namespace std; int gcd(int, int); ...
- 【神经网络与深度学习】【Matlab开发】caffe-windows使能Matlab2015b接口
[神经网络与深度学习][Matlab开发]caffe-windows使能Matlab2015b接口 标签:[神经网络与深度学习] [Matlab开发] 主要是想全部来一次,所以使能了Matlab的接口 ...
- 【Qt开发】Win7 64位qt-windows-x86-msvc2015-5.6.0 DLL依赖库打包
Win7 64位qt-windows-x86-msvc2015-5.6.0 DLL依赖库打包 今天开始系统的学习QT,第一个测试的问题就是在纯净的系统中如何正常运行,也就是找出QT生成的exe的依赖库 ...
- CountDownLatch与CyclicBarrier的对比
CountDownLatch: CountDownLatch通过计数器来实现,计数器表示线程的数量.每当一个线程执行结束后,计数器的值就会减1,并在await方法处阻塞.一旦计数器为0,所有阻塞的线程 ...
- javascrpt的string和Boolean类型
string类型用于表示由零或多个16位unicode字符组成字符序列,即 字符串,字符可以由双引号(“)或单引号(‘)表示 tostring()与 string() 语法:str.tostring( ...
- 手写数字识别 卷积神经网络 Pytorch框架实现
MNIST 手写数字识别 卷积神经网络 Pytorch框架 谨此纪念刚入门的我在卷积神经网络上面的摸爬滚打 说明 下面代码是使用pytorch来实现的LeNet,可以正常运行测试,自己添加了一些注释, ...
- 初识JavaScript(二)
初识JavaScript(二) 我从上一篇<初识JavaScript(一)>知道和认识JavaScript的词法结构,也开始慢慢接触到了JavaScript的使用方法,是必须按照JavaS ...