[JavaScript知识库]Vue动画、过渡

动画:

<template>
  <div>
     <button @click="isdonghua = !isdonghua">显示/隐藏</button>
     <!-- appear 首次运行加载 -->
     <transition appear>
     <h1 v-show="isdonghua">我是动画</h1>
     </transition>
  </div>
</template>

<script>
export default {
    data(){
        return{
            isdonghua:true,
        }
    }
}
</script>

<style scoped lang="less">
h1{
    background-color: aqua;
}
// .v-enter-active 可以修改为.xxx-enter-active  xxx为任意名字 但需要在上面transition标签加上name="xxx"
.v-enter-active{
    animation: dong 0.5s ;
}
.v-leave-active{
    animation: dong 0.5s reverse;
}

//定义动画
@keyframes dong{
    from { 
        transform: translateX(-100%);
    }
    to { 
        transform: translateX(0%);
    }
}
</style>

过渡:

<template>
  <div>
      <button @click="isguo = !isguo">显示/隐藏</button>
    <transition name="guo" appear>
      <h1 v-show="isguo">我是过渡</h1>
    </transition>
  </div>
</template>

<script>
export default {
    data(){
        return{
            isguo:true
        }
    }
}
</script>

<style scoped>
h1{
    background-color: aqua;
    /* transition:0.5s; */
}
/* 可以不在h1 里面写 transition 通过一下方法*/
.guo-enter-active, .guo-leave-active{
    transition:0.5s;
}
/* 进入的起点 */
.guo-enter{
    transform:translateX(-100%)
}
/* 进入的终点 */
.guo-enter-to{
    transform: translateX(0);
}
/* 离开的起点 */
.guo-leave{
    transform:translateX(0)
}
/* 离开的终点 */
.guo-leave-to{
    transform: translateX(-100%);
}


</style>