zoukankan      html  css  js  c++  java
  • vue中淡入淡出示例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <style>
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(100px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.4s ease;
        }
    
    
    
    </style>
    
    <body>
        <div id="app">
    
    
            <input type="button" value="点击我显示/取消" @click="flag=!flag">
    
            <transition>
                <h3 v-if="flag">先希望你孝顺 再愿你成熟努力 一是责任 而是安全感 很想遇到这种人 最好可以晚一点
                不要心急也不要焦虑 等我们远离时常赌气的年纪 懂得包容和鼓励 也许你是对的人
                但现在不是对的时间 等你 也等自己</h3>
            </transition>
    
            <h2>凡人总有取舍 你取了你认为重要的东西 舍弃了我 这只是你的选择而已 若是我因为我没有被选择就心生怨恨
                那这世间 岂不是有太多不可原谅之处 毕竟谁也没有责任要以我为先 以我为重 无论我如何希望 也不能强求</h2>
        </div>
    
    
        <script>
    
            var app = new Vue({
                el: '#app',
                data:{
                  flag: false
    
    
                },
                methods: {
    
                },
                created: function () {
    
                },
                mounted: function () {
    
                }
            })
    
        </script>
    </body>
    </html>
  • 相关阅读:
    (C#)TreeView控件综合实例
    C#语言命名规则
    C#基础全接触
    (C#)GDI+简单绘图画矩形
    (C#)GDI+简单绘图画曲线
    C#拆箱与装箱之代码优化
    (C#)GDI+绘图之鼠标移动画图
    近期学习计划
    MS_SQL_杂记(一)
    别在迷恋正则表达式解析html了,好吗?
  • 原文地址:https://www.cnblogs.com/yuwenjing0727/p/11039562.html
Copyright © 2011-2022 走看看