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 ...
随机推荐
- PC端网页嵌入百度地图
1 打开百度地图生成器: http://api.map.baidu.com/lbsapi/creatmap/ 2 设置好了之后,点击获取代码,将代码粘贴到文件中保存为html文件 参考网址:https ...
- java：JSP（JSPWeb.xml的配置，动态和静态导入JSP文件，重定项和请求转发，使用JSP实现数据库的增删改查实例）
1.JSP的配置: <%@ page language="java" import="java.util.*" pageEncoding="UT ...
- HDU2196 Computer【换根dp】
题目传送门 题意: 给定一个$N$个点的树,第$i$条边的长度是$A_i$,求每个点到其他所有点的最长距离.数据范围:$n ≤ 10000$,$A_i ≤ 10_9$ 分析 首先,从随便哪个节点($1 ...
- 【机器学习】HK算法（LMSE算法） LMS算法改进保证线性可分时均方误差标准能够找到线性可分的超平面
1.其实HK算法思想很朴实,就是在最小均方误差准则下求得权矢量. 他相对于感知器算法的优点在于,他适用于线性可分和非线性可分得情况,对于线性可分的情况,给出最优权矢量,对于非线性可分得情况,能够判别出 ...
- Junit4 简单使用
一.环境搭建 对于习惯使用Eclipse开发平台来说,Junit早已是非常通常的插件,在Eclipse开发平台中,可以非常方便地搭建Junit测试环境. 1.在Eclipse上创建工程,任何Java工 ...
- 2019JAVA第六次实验报告
Java实验报告 班级 计科二班 学号 20188442 姓名 吴怡君 完成时间 2019.10.18 评分等级 实验四 类的继承 实验目的 理解异常的基本概念: 掌握异常处理方法及熟悉常见异常的捕获 ...
- C语言博课作业11
一.本周作业头 这个作业属与那个课程 C语言程序设计I 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-3/homework/10130 ...
- Linux MFS分布式文件系统介绍和安装
MFS分布式文件系统 mooseFS(moose 驼鹿)是一款网络分布式文件系统.它把数据分散在多台服务器上,但对于用户来讲,看到的只是一个源.MFS也像其他类unix文件系统一样,包含了层级结构(目 ...
- C++中利用迭代器删除元素会发生什么？
转自:https://blog.csdn.net/yf_li123/article/details/75003425#comments (1)对于关联容器(如map,set,multimap,mu ...
- IIS web服务器与ASP.NET
参考教程:MVC网站项目发布到IIS服务器 https://jingyan.baidu.com/article/92255446574e11851648f4e4.html https://blog.c ...