Vue项目小功能：过度~transition

Vue 提供了 transition 的封装组件，来处理过渡以及动画

使用过渡或动画的场景

• 在下列情形中，可以给任何元素和组件添加进入/离开过渡条
• 件渲染(使用v-if)
• 条件展示(使用v-show)
• 动态组件
• 组件的根节点

div:

<div id="app">
  <button @click="isShow = !isShow">显示隐藏</button>
  <transition name="hello">
    <h1 v-show="isShow" class="come">我是vue过度动画</h1>
  </transition>
</div>

样式：

   h1 {
          background: #f38787;
          text-align: center;
          color: white;
      }
      .hello-enter-active {
          animation: atguigu 1s linear;
      }
      .hello-leave-active {
          animation: atguigu 1s linear reverse;
      }
      @keyframes atguigu {
          from {
              transform: translateX(-100%);
          }
          to {
              transform: translateX(0px);
          }
      }

Vue实例:

    var vue = new Vue({
        el: '#app',
        data: {
            msg: '我是vue123',
            isShow: true
        },
        methods: {
            test() {
                console.log('111')
            }
        }
    })

2，过度属性

查看代码

 <style>
    div{
        font-size:30px;
        font-weight: bold;
    }
    .v-enter{
        color:red;
    }
    .v-enter-to{
        color:blue;
    }
    .v-enter-active{
        transition:all 5s;
    }
    .v-leave{
        color: blue;
    }
    .v-leave-to{
        color: purple;
    }
    .v-leave-active{
        transition:all 3s;
    }
</style>

<div id="app">
    <!-- 按钮,点击切换元素的显示和隐藏 -->
    <button @click="isShow = !isShow">点击切换</button>

    <!-- 显示元素 -->
    <transition>
        <div v-if="isShow">需要动画的元素</div>
    </transition>

</div>

<script>

    //  实例
    const vm = new Vue({
        el:"#app",
        data:{
            isShow:true
        }
    })
</script>