vue动画实现方式
vue动画实现方式
<!DOCTYPE html>
<html lang="zh-cn"> <head>
<meta charset="utf-8">
<link rel="stylesheet" href="animate.css">
<style>
* {
margin: 0;
padding: 0;
}
#app{
width: 600px;
margin: 100px auto;
}
.box {
width: 200px;
height: 200px;
background-color: pink;
display: flex;
justify-content: center;
align-items: center;
} button {
width: 50px;
height: 30px;
}
/* 第二步 定义入场动画 和 出场动画 */
/* 格式： 动画名-enter 入场动画*/
/* 格式： 动画名-leave 出场动画*/
/* 进入过渡开始时的状态和离开过渡结束时的状态 */
.fade-enter,.fade-leave-to{
opacity: 0;
transform:translate(500px, 0);
}
/* 进入过渡中的效果和离开过渡中的效果 */
.fade-enter-active,.fade-leave-active{
transition: all 0.8s;
}
/* 进入过渡结束时的状态和离开过渡结束时的状态 */
.fade-enter-to,.fade-leave{
opacity: 1;
} .bounce-enter-active{
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in{
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.pp{
background-color: #c05;
}
</style>
</head> <body>
<div id="app">
<!-- 1.过渡 -->
<button @click="isShow = !isShow">过渡</button>
<!-- 第一步给要动画的元素 起个动画名子 -->
<!-- 格式: name=动画名 -->
<transition name="fade" :duration="3000">
<p class="box" v-show="isShow">我要过渡</p>
</transition>
<hr>
<!-- 2.动画 -->
<button @click="isShow2 = !isShow2">动画</button>
<!-- 第一步给要动画的元素 起个动画名子 -->
<!-- 格式: name=动画名 -->
<transition name="bounce" :duration="{ enter: 1000, leave: 1800 }">
<p class="box" v-if="isShow2">我要运动</p>
</transition>
<!-- 3.自定义过渡 类名 -->
<button @click="show = !show">自定义</button>
<transition
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show" class="pp">hello</p>
</transition> </div> <script src="velocity.js"></script>
<script src="vue.js"></script>
<script>
var vm = new Vue({
data: {
isShow: true, //过渡
isShow2:true, //动画
show:true,
},
methods: { }
}).$mount('#app'); </script>
</body> </html>
vue动画实现方式的更多相关文章
- vue动画理解，进入、离开、列表过度和路由切换。
vue的动画对于很多初学者,甚至对很多老鸟来说也是很费劲,不容易控制的. 这篇文章讲vue动画的理解.其实没那么难. 动画理解 一个元素从A状态变成B状态,如果这个过程通过某种方式反应在视图上了,那么 ...
- Vue动画操作
概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...
- Javascript - Vue - 动画
动画状态类名 vue动画通过将需要执行动画的标签放入transition标签中,再通过设置预置的vue动画类名的css样式来控制动画的呈现效果. 开场动画状态的三个类名 v-enter:动画开始之前的 ...
- vue动画的用法
vue动画 在vue.js中有两种写动画的方法,第一种就是像js里一样,用原生代码来实现,第二种则是使用animate.css的动画类文件,这个动画类和bootstrap.css文件类似,直接调用类就 ...
- iOS页面切换动画实现方式。
iOS页面切换动画实现方式. 1.使用UIView animateWithDuration:animations:completion方法 Java代码 [UIView animateWithDura ...
- vue动画及其原理
1,vue动画的实现原理,主要是通过在不同时期给需要动画的dom元素加上css动画样式 我们以显示和隐藏动画为例 a, 需要动画的dom元素 b,点击时vue控制往vue中加的样式 2, 我们以两张 ...
- vue教程3-02 vue动画
vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...
- vue组件定义方式，vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
- vue 动画原理 part1
Vue动画原理 增加和删除css增加样式实现一个过渡效果也就是动画效果 1.需要动画效果的标签外包裹一个transition标签 会被自动分析css样式,然后自动构建一个动画流程 transition ...
随机推荐
- CentOS高可用集群LVS+Keepalived(DR模式)
操作系统:CentOS6.5_x64 mini 负载均衡模式:DR(直接路由) LVS与Keepalived简述: LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是 ...
- 《数据挖掘导论》实验课——实验四、数据挖掘之KNN,Naive Bayes
实验四.数据挖掘之KNN,Naive Bayes 一.实验目的 1. 掌握KNN的原理 2. 掌握Naive Bayes的原理 3. 学会利用KNN与Navie Bayes解决分类问题 二.实验工具 ...
- Git push error: http 411的解决方案总结
目录 一.事故现场 二.事故原因 三.解决方案 一.事故现场 git push 的时候报错如下: 将分支推送到远程存储库时遇到错误:Git failed with a fatal error, the ...
- H5移动端开发遇见的东西
常见的有viewport.强制浏览器全屏.IOS的Web APP模式.可点击元素出现阴影 本文主要讲一些其他的或者实用的优化手段. 1. 弹出数字键盘 <!-- 有"#" & ...
- new String()与toString
str.toString是调用了str这个object对象的类的toString方法.一般是返回这么一个String:[class name]@[hashCode].new String(str)是根 ...
- Java 添加Word文本水印、图片水印
水印是一种常用于各种文档的声明.防伪手段,一般可设置文字水印或者加载图片作为水印.以下内容将分享通过Java编程给Word文档添加水印效果的方法,即 文本水印 图片水印 使用工具:Free Spire ...
- Java每日一面(Part1:计算机网络)[19/10/13]
作者:晨钟暮鼓c个人微信公众号:程序猿的月光宝盒 1.说说TCP三次握手 1.0 在此之前,什么是TCP? TCP(传输控制协议) 1.面向连接的,可靠的,基于字节流的传输层通信协议 2. ...
- 企业架构如何实施的简介（TOGAF深度好文）
本文来自企业架构学院: BangEA:如何实施企业架构? IT不仅是开展业务的手段,而且正在迅速演变为业务,IT绩效会直接影响企业的盈利能力,但很多企业并没有适时或充分的让IT组织参与业务的规划和决策 ...
- WPF--事件列表
事件 描述 Annotation.AnchorChanged 新增.移除或修改 Anchor 元素时发生. Annotation.AuthorChanged 新增.移除或修改 Author 元素时发生 ...
- PHP时间戳相互转换
1.获取当前时间方法date()很简单,这就是获取时间的方法,格式为:date(format,format,timestamp),format为格式.timestamp为时间戳–可填参数. 2.获取时 ...