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_01.Spring框架简介_05.spring的优势
- PHP结合Ueditor并修改图片上传路径 微信小程序 拼接域名显示图片
前言 在使用UEditor编辑器时,一般我们都是需要修改默认的图片上传路径的,下面是我整理好的修改位置和方法供大家参考. 操作 Ueditor PHP版本本身自带了一套上传程序,我们可以在此基础中,找 ...
- 52N皇后II
题目:给定一个整数 n,返回 n 皇后不同的解决方案的数量. 来源:https://leetcode-cn.com/problems/n-queens-ii/ 法一: 自己的代码 时间超过百分之90 ...
- Python学习之进程
8.2 进程 8.2.1 进程的创建 开启多进程scoketserver:server.client 进程的开启:python中的多线程,一定是有一个主进程,由主进程创建几个子进程, Linux与Wi ...
- I/O流之---FileInputStream和FileOutputStream的使用
FileInputStream和FileOutputStream都属于文件字节流. 通常我们可以用来做文件的复制操作,如下: import java.io.File; import java.io.F ...
- Zookeeper 假死脑裂
该问题就是服务集群因为网络震荡导致的多主多从问题,解决方案就是设置服务切换的超时时间,但也同时会导致无法达到高可用的要求.
- 实验仓 #779.【CSP2019模拟 Day 1】A题
题目传送门 考场上面做了一个暴力的做法,然后,然后他$WA$了. emmm...($T$就算了吧,$WA$了算什么事啊) 好吧,这道题,其实好像...是一道思维题来着. 如果出现了这样两个打X的格子上 ...
- Python新手练手项目
1.新手练手项目集中推荐 https://zhuanlan.zhihu.com/p/22164270 2.Python学习网站 https://www.shiyanlou.com 3.数据结构可视化学 ...
- MySQL -2- 体系结构--随笔小记
简介与安装NoSQLRDBMS版本安装方式二进制安装,源码安装体系结构CS模型TCP/IPsocketmysql master thread 实例mysqld 的程序构成连接层 协议.验证.链接线程S ...
- ftp读取图片并转Base64
public String download(String ftpUrl,String sfzh){ FTPClient ftpClient = new FTPClient(); InputStrea ...