Vue 原生动画
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<!-- 2. 自定义两组样式，来控制 transition 内部的元素实现动画 -->
<style>
/* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
/* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(150px);
} /* v-enter-active 【入场动画的时间段】 */
/* v-leave-active 【离场动画的时间段】 */
.v-enter-active,
.v-leave-active {
transition: all 0.8s ease;
} .my-enter,
.my-leave-to {
opacity: 0;
transform: translateY(70px);
} .my-enter-active,
.my-leave-active {
transition: all 0.8s ease;
}
</style>
</head> <body>
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
<!-- 1. 使用 transition 元素，把 需要被动画控制的元素，包裹起来 -->
<!-- transition 元素，是 Vue 官方提供的 -->
<transition>
<h3 v-if="flag">这是一个H3</h3>
</transition>
<hr>
<input type="button" value="toggle2" @click="flag2=!flag2">
<!-- 这里设置了name的值就可以不用v-前缀 设置样式-->
<transition name="my">
<h6 v-if="flag2">这是一个H6</h6>
</transition>
</div> <script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: false,
flag2: false
},
methods: {}
});
</script>
</body> </html>
Vue 原生动画的更多相关文章
- 从零开始学 Web 之 Vue.js（五）Vue的动画
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 使用Lottie将AE项目转换为 Web 原生动画
使用Lottie转换AE项目为 Web 原生动画 首先打开链接https://github.com/airbnb/lottie-web/blob/master/build/extension/body ...
- vue 的动画
1.vue 的动画流程分为enter,和leave分别对应以下两幅图 <!doctype html><html lang="en"><head> ...
- Bodymovin：Bodymovin和Lottie：把AE动画转换成HTML5/Android/iOS原生动画
转自:https://www.cnblogs.com/zamhown/p/6688369.html 大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画 ...
- 大杀器Bodymovin和Lottie：把AE动画转换成HTML5/Android/iOS原生动画
前段时间听部门老大说,Airbnb出了个移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/iOS原生动画的形 ...
- 049——VUE中使用animation与transform实现vue的动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue的动画组件（transition）
当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理: 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名. v-enter: 定 ...
- vue学习指南：第十篇(详细) - Vue的 动画
Vue 提供了一些不同的过度效果,主要根 v-if v-show 动态组件 1. Vue给动画分了6个过程,在css中,扮演6个类, 1. .v-enter定义动画的开始状态 2. .v-ente ...
- Vue+原生App混合开发手记#1
项目的大致需求就是做一个App,里面集成各种功能供用户使用,其中涉及到很多Vue的使用方法,单独总结太麻烦,所以通过这几篇笔记来梳理一下.原型图如下: 路由配置 主界面会用到一些原生App方法,比如验 ...
随机推荐
- 求x！在k进制下后缀零的个数（洛谷月赛T1）
求x!在k进制下后缀和的个数 20分: 求十进制下的x!后缀和的个数 40分: 高精求阶乘,直接模拟过程 (我不管反正我不打,本蒟蒻最讨厌高精了) 60分 利用一个定理(网上有求x!在 ...
- Centos6.x终端中文乱码
locale LANG LC_*的默认值,是最低级别的设置,如果LC_*没有设置,则使用该值.类似于 LC_ALL. LC_ALL 它是一个宏,如果该值设置了,则该值会覆盖所有LC_*的设置值.注意 ...
- MySQL用户管理+MySQL权限管理
我们现在默认使用的都是root用户,超级管理员,拥有全部的权限! 但是,一个公司里面的数据库服务器上面可能同时运行着很多个项目的数据库! 所以,我们应该可以根据不同的项目建立不同的用户,分配不同的权限 ...
- "NetworkError: 404 Not Found fontawesome-webfont.woff?v=4.0.3
This worked for me: Add the following lines to your web.config <system.webServer> <staticCo ...
- mariadb配置文件优化参数
mariadb数据库优化需要根据自己业务需求以及根据硬件配置来进行参数优化,下面是一些关于mariadb数据库参数优化的配置文件. 1 如下为128G内存32线程处理器的mariadb配置参数优化: ...
- ANSI编码方式转化为UTF-8方式
说明: 记事本txt有四种编码方式,分别为:UTF-8.ANSI.Unicode和Unicode big endian,当进行写操作,创建的txt编码格式,与写入汉字的编码方式相同:如果写入的汉字是不 ...
- WebSocket简述
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在 W ...
- thinkphp5.0 模板包含文件
在index.html里包含layout.html:{include file=“layout”}它这里是以绝对路径查找所包含的文件,默认是view目录下 在这种情况下,要在在index.html里包 ...
- TIJ——Chapter Nine:Interfaces
A class containing abstract methods is called an abstract class. If a class Contains one of more abs ...
- Azkaban3.x
Azkaban3.x安装部署 官方文档地址 三种模式 solo-server模式:exec进程和web进程为同一个进程,存放元数据的数据库为H2 two-server模式:与之前的单机版本类似,exe ...