vue过渡动画

<div id="box">
        <input type="button" value="按钮" @click="toggle">
        <transition name="fade">
        	<div id="div1" v-show="isShow"></div>
        </transition>
    </div>

	<script src='vue.min.js'></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#box',
            data:{
                isShow:false
            },
            methods:{
                toggle(){
                    this.isShow = !this.isShow;
                }
            }
        });
    </script>

　　

.fade-enter-active, .fade-leave-active {
  transition: opacity 10.5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}

#div1{width: 500px;height: 500px;background: red;}

transition的属性 name就是样式的类名



v-for循环过渡

<template>
	<div id="firstcomponent">
		<div @click="click">点击</div>
		<transition-group name="list" tag="p" class="list">
		    <li v-for="item in data" v-bind:key="item" class="list-item">
		      {{ item.title }}
		    </li>
		  </transition-group>
	</div>
</template>


<script type="text/javascript">
		export default{
			data(){
				return{
					data:[
						{title:"1",txtle:"a1"},
						{title:"2",txtle:"a2"},
						{title:"3",txtle:"a3"},
						{title:"4",txtle:"a4"},
						{title:"5",txtle:"a5"}
					]
				}
			},
			methods: {
				    click() {
				    	var that=this;
				      let li={title:"5",txtle:"a5"};
				      this.data.unshift(li);
				      setTimeout(function(){
				      	console.log("000");
				      	that.data.splice(5, 1)
				      },1000)
				    }
				}
		}
</script>

<style type="text/css">
.list  li{width: 250px;border: #ddd solid 1px;line-height: 28px;overflow: hidden;padding: 0px 10px;height: 28px;display: block;}

.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter{
  opacity: 0;
  transform: translateX(30px);
}
.list-leave-active {
  opacity: 0;
  transform: translateY(30px);
}

</style>

　　

 

//开始状态结束
.move-enter-active{
　　opacity: 0;left: 0px;
}
//结束状态结束
.move-leave-active{
　　opacity: 0;left: -200px;
}
//开始状态开始
.move-enter{
　　opacity: 1;left: -200px;
}
//结束状态开始
.move-leave{
　　opacity: 1;left: 0px;
}