<!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. Chrome开发者工具详解（三）之浏览器调试完后如何清除所有的断点

  2. 梯度下降算法(Gradient descent)GD

    1.我们之前已经定义了代价函数J,可以将代价函数J最小化的方法,梯度下降是最常用的算法,它不仅仅用在线性回归上,还被应用在机器学习的众多领域中,在后续的课程中,我们将使用梯度下降算法最小化其他函数,而 ...

  3. 前端开发HTML&css入门——CSS&选择器练习

    CSS 层叠样式表 (Cascading Style Sheets)css可以用来为网页创建样式表,通过样式表可以对网页进行装饰.所谓层叠,可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低 ...

  4. python的java胶水(jpype1)

    1.直接使用pip安装jpype1 命令 pip install jpype1 但是,很不幸,提示报错,缺少VC++组件. 2.使用其他方法安装 在  https://www.lfd.uci.edu/ ...

  5. ffmpeg使用分析视频

    https://www.cnblogs.com/Finley/p/8646711.html 先存下

  6. laplace transform 拉普拉斯变换

    参考网址: 1. https://en.wikipedia.org/wiki/First-hitting-time_model 2. https://en.wikipedia.org/wiki/Lap ...

  7. u-boot 用哪个lds链接脚本

    顶层Makefile文件中 : ifndef LDSCRIPT    #LDSCRIPT := $(srctree)/board/$(BOARDDIR)/u-boot.lds.debug    ifd ...

  8. bzoj4542 [Hnoi2016]大数 莫队+同余

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4542 题解 我们令 \(f_i\) 表示从 \(i\) 到 \(n\) 位组成的数 \(\bm ...

  9. FCC 成都社区·前端周刊 第 8 期

    01. 2018 前端开发者手册 这是一份 2018 前端开发手册,内容包括三个部分:前端工程实践.前端开发学习和前端开发工具. 详情:https://frontendmasters.com/book ...

  10. mysql 连接1251错误

    问题: 解决方案: 使用管理员权限打开cmd执行以下命令: mysql -u root p use mysql alter user root@localhost identified with my ...