transition vue动画,过渡动画

最新推荐文章于 2024-07-20 18:05:54 发布

m0_68671223

最新推荐文章于 2024-07-20 18:05:54 发布

阅读量119

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_68671223/article/details/128626076

版权

<template>
 <div style="width:100px;height:100px;">
      <div @click="show=!show">点击</div>

      <transition name="transWords">
        <div v-show="show">动画效果</div>
      </transition>
 </div>
</template>
<script>
export default {
  data() {
    return {
      show:false
    }
  }

</script>

<style>
.transWords-enter{
    opacity: 0.1;
    background-color: green;
}
.transWords-enter-active{
    transition: all 3s linear;
   
}
.transWords-enter-to{
    opacity: 0.7;
    background-color: red;
     font-size: 50px;
}
.transWords-leave{
    opacity: 0.9;
    background-color: red;
    
}
.transWords-leave-active{
    transition: all 3s linear;
}
.transWords-leave-to{
    opacity: 0.1;
    background-color: palegreen;
    font-size: 20px;
}
</style>