vue18 动画
<!-- bower-> （前端）包管理器
npm install bower -g
验证: bower --version bower install <包名>
bower uninstall <包名>
bower info <包名> 查看包版本信息 <script src="bower_components/vue/dist/vue.js"></script>
--> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
#div1{
width:100px;
height:100px;
background: red;
}
.fade-transition{ //整体动画
transition: 1s all ease;
}
.fade-enter{ //进入：
opacity: 0;
}
.fade-leave{ //离开：
opacity: 0;
transform: translateX(200px); //右边飞
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="按钮" @click="toggle">
<div id="div1" v-show="bSign" transition="fade"></div> <!--transition="fade" 固定写法：动画名称-->
</div> <script>
new Vue({
el:'#box',
data:{
bSign:true
},
methods:{
/*toggle:function(){
alert(1);
}*/
toggle(){//es6语法，等价上面写法，
this.bSign=!this.bSign;
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<link rel="stylesheet" href="bower_components/animate.css/animate.css">
<!-- animate.css动画库 -->
<style>
#box{
width:400px;
margin: 0 auto;
}
#div1{
width:100px;
height:100px;
background: red;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="按钮" @click="toggle">
<div id="div1" class="animated" v-show="bSign" transition="bounce"></div>
</div> <script>
new Vue({
el:'#box',
data:{
bSign:true
},
methods:{
toggle(){
this.bSign=!this.bSign;
}
},
transitions:{ //定义所有动画名称
bounce:{//动画名称 transition="bounce"
enterClass:'zoomInLeft',
leaveClass:'zoomOutRight'
}
}
});
</script>
</body>
</html>
vue18 动画的更多相关文章
- 动画requestAnimationFrame
前言 在研究canvas的2D pixi.js库的时候,其动画的刷新都用requestAnimationFrame替代了setTimeout 或 setInterval 但是jQuery中还是采用了s ...
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
- CSS 3学习——animation动画
以下内容根据官方文档翻译以及自己的理解整理. 1. 介绍 本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在 ...
- javascript动画系列第三篇——碰撞检测
前面的话 前面分别介绍了拖拽模拟和磁性吸附,当可视区域内存在多个可拖拽元素,就出现碰撞检测的问题,这也是javascript动画的一个经典问题.本篇将详细介绍碰撞检测 原理介绍 碰撞检测的方法有很多, ...
- 虾扯蛋：Android View动画 Animation不完全解析
本文结合一些周知的概念和源码片段,对View动画的工作原理进行挖掘和分析.以下不是对源码一丝不苟的分析过程,只是以搞清楚Animation的执行过程.如何被周期性调用为目标粗略分析下相关方法的执行细节 ...
- Visaul Studio 常用快捷键的动画演示
从本篇文章开始,我将会陆续介绍提高 VS 开发效率的文章,欢迎大家补充~ 在进行代码开发的时候,我们往往会频繁的使用键盘.鼠标进行协作,但是切换使用两种工具会影响到我们的开发速度,如果所有的操作都可以 ...
- transtion:过渡动画
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #4f5d66 } p.p2 { margin: 0.0px 0 ...
- 再谈CAAnimation动画
CAAnimaton动画分为CABasicAnimation & CAKeyframeAnimation CABasicAnimation动画, 顾名思义就是最基本的动画, 老规矩先上代码: ...
- jQuery动画-圣诞节礼物
▓▓▓▓▓▓ 大致介绍 下午看到了一个送圣诞礼物的小动画,正好要快到圣诞节了,就动手模仿并改进了一些小问题 原地址:花式轮播----圣诞礼物传送 思路:动画中一共有五个礼物,他们平均分布在屏幕中,设置 ...
随机推荐
- WordPress开启伪静态
一.NGINX 的话在 domain.conf 的 server 增加代码: location / { try_files $uri $uri/ /index.php?$args; } 如果使用的是 ...
- 【jQuery01】添加添加div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【转载】python学习之 字符串前'r'的用法
文章转载:https://www.cnblogs.com/cyiner/archive/2011/09/18/2180729.html 在打开文件的时候open(r'c:\....') 加r和不加'' ...
- GenIcam标准（二）
2 GenApi模块 – 配置相机 2.1. 简介 GenApi模块解决如何去配置相机的问题.主要的思路是,让相机生产厂商为他们的相机提供机器可以识别的产品说明.这些相机描述文件(camera ...
- TOJ 3517 The longest athletic track
3517. The longest athletic track Time Limit: 1.0 Seconds Memory Limit: 65536KTotal Runs: 880 A ...
- [MST] Test mobx-state-tree Models by Recording Snapshots or Patches
Testing models is straightforward. Especially because MST provides powerful tools to track exactly h ...
- php通过shell调用Hadoop的方法
1.php代码(index.php) <!DOCTYPE html> <html> <!-- <style> body{background-color:re ...
- 网络通信-ping命令
- Android RecyclerView和ScrollView嵌套使用
我们的recyclerView有多个layoutmanager,通过重写layoutmanager的方法就可以让recyclerView和ScrollView嵌套了.但是请注意,如果recyclerV ...
- 《剑指offer》调整数组顺序使奇数位于偶数前面
一.题目描述 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变. 二.输入描述 ...