<!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动画原理的更多相关文章

  1. vue中css动画原理

    显示原理: <transition name='fade'> <div v-if='show'>hello world</div> </transition& ...

  2. vue css动画原理

    从隐藏到显现 从显现到隐藏 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  3. CSS动画原理及硬件加速

    一.图层 图层即层叠上下文,具体概念和应用大家可以看我之前转自张鑫旭大神博客的<CSS层叠上下文和层叠顺序>,这里我们简单复习一下产生层叠上下文的原因. 1.根层叠上下文 指的是页面根元素 ...

  4. 36纯 CSS 动画原理,在页面上表现日蚀现象

    原文地址:https://segmentfault.com/a/1190000015070543 感想: 动画,背景颜色 HTML code: <div class="sky" ...

  5. 如何利用 CSS 动画原理,在页面上表现日蚀现象

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OELvrK 可交互视频教 ...

  6. 前端每日实战:36# 视频演示如何利用 CSS 动画原理,在页面上表现日蚀现象

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OELvrK 可交互视频教程 此视频 ...

  7. Vue 中的动画特效

    Vue 中的动画特效 CSS 实现标签显隐 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  8. CSS动画小结

    CSS动画 原理:1.画面之间变化  2.视觉暂留作用 常见问题 1.CSS 动画的实现方式有几种 1.transition  2. keyframes(animation) 2.过渡动画和关键帧动画 ...

  9. vue 动画原理 part1

    Vue动画原理 增加和删除css增加样式实现一个过渡效果也就是动画效果 1.需要动画效果的标签外包裹一个transition标签 会被自动分析css样式,然后自动构建一个动画流程 transition ...

随机推荐

  1. python学习笔记:(十一)模块

    模块是指一个包含定义的函数和变量的文件,其后缀名为.py.模块可以被别的程序引用,并使用其中的函数等功能. 1.import语句 如果需要使用模块,只需要在新模块中导入模块.使用import关键字 如 ...

  2. CMake下,某些选项的后调整

    编译安卓NDK库时,发现在R15的NDK编译出来的库,总是带了-g选项,导致附带调试,文件过大. 搜索一番后,结论是NDK的文件中有问题: https://github.com/android/ndk ...

  3. linux下mongodb程序和c++客户端的编译

    2016-4-6     14:17:15   安装前准备:1/ 安装boost库2/ 安装scons程序 方法一:$ git clone git://github.com/mongodb/mongo ...

  4. ARM的编程模式及寄存器

    根据朱老师的课程及下面博客整理 http://blog.chinaunix.net/uid-20443992-id-5700979.html ARM 采用的是32位架构 ARM 约定: Byte : ...

  5. 【LeetCode】122、买卖股票的最佳时机 II

    Best Time to Buy and Sell Stock II 题目等级:Easy 题目描述: Say you have an array for which the ith element i ...

  6. yum安装nginx(Centos)

    测试人员需要了解Nginx?nginx的别名有很多:中间件,HTTP服务器,代理服务器等,这些名字都是作用的一个体现.在实际项目中,前后端分离,负载均衡等也是通过Nginx实现的,知己知彼,百战百胜. ...

  7. Mysql数据库表结构设计准则

    一:动静分离 解释:最好做好静态表和动态表的分离.这里解释一下静态表和动态表的含义,静态表:存储着一些固定不变的资源,比如城市/地区名/国家(静态表一定要使用缓存).动态表:一些频繁修改的表 二:关于 ...

  8. spark 运行报错:java.lang.AbstractMethodError

    报错日志如下: Caused by: java.lang.AbstractMethodError: sparkCore.JavaWordCount$2.call(Ljava/lang/Object;) ...

  9. next_permutation() 全排列函数

    next_permutation() 全排列函数 这个函数是STL自带的,用来求出该数组的下一个排列组合 相当之好用,懒人专用 适用于不想自己用dfs写全排列的同学(结尾附上dfs代码) 洛谷oj可去 ...

  10. mysql在docker下运行,出现中文乱码