<!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>

vue中淡入淡出示例的更多相关文章

  1. vue渐变淡入淡出轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue中插入Echarts示例（菜鸟记录）

  3. jQuery-4.动画篇---淡入淡出效果

    jQuery中淡出动画fadeOut 让元素在页面不可见,常用的办法就是通过设置样式的display:none.除此之外还可以一些类似的办法可以达到这个目的.这里要提一个透明度的方法,设置元素透明度为 ...

  4. jQuery基础（动画篇 animate，显示隐藏，淡入淡出，下拉切换）

    1.jQuery中隐藏元素的hide方法   让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...

  5. Vue基础系列（五）——Vue中的指令（中）

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  6. JQuery动画之淡入淡出动画

    1. 淡入动画 1.1 不带参数的淡入动画 格式: $(selector).fadeIn(); 示例代码: <!doctype html> <html lang="en&q ...

  7. Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  8. 测试SDWebImage淡入淡出效果在UITableView中的重用显示问题

    测试SDWebImage淡入淡出效果在UITableView中的重用显示问题 这个是在上一篇教程的基础上所添加的测试环节! 效果图(从效果图中看是没有任何重用问题的): 源码: ImageCell.h ...

  9. 使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆 ...

随机推荐

  1. 【 React - 1/100 】React绑定事件this指向问题--改变state中的值

    /** * 报错: * Cannot read property 'setState' of undefined * 原因: this指向不一致.btnAddCount中的this 和render中的 ...

  2. Nginx设置上传文件大小限制

    就是nginx对上传的图片大小有了限制嘛,所以更改nginx的配置文件就好了 client_max_body_size 1000m; 参考:https://blog.csdn.net/TitanSee ...

  3. H5微信授权登录

    这里介绍H5微信授权登录,采用了微信公众号授权原理,是oauth2的登录授权方式,简单的来讲,就是用户通过手机微信确认登录之后,微信方会返回一个授权码code给回第三方(接入方),这个授权码code一 ...

  4. 长短时间记忆的中文分词 (LSTM for Chinese Word Segmentation)

    翻译学长的一片论文:Long Short-Term Memory Neural Networks for Chinese Word Segmentation 传统的neural Model for C ...

  5. flask框架上下文

    上下文 上下文:相当于一个容器,保存了 Flask 程序运行过程中的一些信息. Flask中有两种上下文,请求上下文和应用上下文 请求上下文(request context) 在 flask 中,可以 ...

  6. java.sql.SQLException: Unknown system variable 'query_cache_size'

    改为 <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java< ...

  7. H5 FileReader对象

    前言:FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. < ...

  8. Python----公开课

    # 构造函数- 类在实例化的时候,执行一些基础性的初始化的工作- 使用特殊的名称和写法- 在实例化的时候自动执行- 是在实例化的时候第一个被执行的函数- ----------------------- ...

  9. 大数加法(A + B Problem Plus)问题

    解题思路 两个⼤数可以⽤数组来逐位保存,然后在数组中逐位进⾏相加,再判断该位相加后是否需要进位.为了⽅便计算,可以把数字的低位放到数组的前面,高位放在后面. 样例输入 3 18 22 56 744 5 ...

  10. 软件安装——JRE多版本问题

    [Q]运行UMongo.exe文件时显示错误信息“The registry refers to a nonexsistent JAVA Runtime Envioroment or the Runti ...