height 按钮 span wid tle scrip city cti
1
- <!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>
- </div>
- <script>
- new Vue({
- el:'#box',
- data:{
- bSign:true
- },
- methods:{
- /*toggle:function(){
- alert(1);
- }*/
- toggle(){
- this.bSign=!this.bSign;
- }
- }
- });
- </script>
- </body>
- </html>
2
- <!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">
- <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: {
- enterClass: 'zoomInLeft',
- leaveClass: 'zoomOutRight'
- }
- }
- });
- </script>
- </body>
- </html>
3 动态组件
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <script src="bower_components/vue/dist/vue.js"></script>
- <style>
- </style>
- </head>
- <body>
- <div id="box">
- <input type="button" @click="a='aaa'" value="aaa组件">
- <input type="button" @click="a='bbb'" value="bbb组件">
- <component :is="a"></component>
- </div>
- <script>
- var vm=new Vue({
- el:'#box',
- data:{
- a:'aaa'
- },
- components:{
- 'aaa':{
- template:'<h2>我是aaa组件</h2>'
- },
- 'bbb':{
- template:'<h2>我是bbb组件</h2>'
- }
- }
- });
- </script>
- </body>
- </html>
vue - 动画
来源: http://www.bubuko.com/infodetail-2275797.html