• Day3.2过渡类名实现动画


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script src="../lib/js/vue.js"></script>
    </head>
    <style>
    /**
    .v-enter 【这是一个时间点】进入之前,元素的起始状态,此时还没有开始进入
    .v-leave-to 【这是一个时间点】动画离开之后,离开的终止状态,此时动画已经结束
    */
    .v-enter,
    .v-leave-to{
    opacity: 0;
    transform: translate(150px);
    }
    /**
    .v-enter-active 【入场动画的时间段】
    .v-leave-active 【离场动画的时间段】
    */
    .v-enter-active,
    .v-leave-active{
    transition: all 0.6s linear;
    }
    </style>
    <body>
    <div id="app">

    <h1>使用过渡类名实现动画</h1>
    <input type="button" value="button" @click="change2">
    <!-- 使用transition标签把动画的内容包裹起来 -->
    <transition>
    <h3 v-if="flag2">这是一只猫</h3>
    </transition>
    </div>
    <script>
    const vm = new Vue({
    el:'#app',
    data:{
    flag2:'true'
    },
    methods:{
    change2(){
    this.flag2 = !this.flag2
    }
    }
    })
    </script>
    </body>
    </html>
  • 相关阅读:
    request实现登录
    python之对象
    python基础之迭代与解析
    python基础之函数
    linux expect命令使用入门
    Python socket
    1
    蓝牙
    SQL查询语句
    iOS常用小知识纪录
  • 原文地址:https://www.cnblogs.com/zhaohui-116/p/12057237.html
Copyright © 2020-2023  润新知