<!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. vue实现动画和css3动画属性

    一.vue动画实现原理: 动画的实现,必须通过元素的显示隐藏或销毁创建.v-show  v-if vue中如果需要使用动画的时候,需要使用一个内置组件transition组件 该组件有一个name属性 ...

  2. c# 数据库基础（将连接字符串写到配置文件中）

    数据库 操作步骤 一,添加一个配置文件 内容 <?xml version="1.0" encoding="utf-8" ?> <configu ...

  3. ab压测

    安装:yum install -y httpd-tools 验证:ab -V ab -help:-n requests 要执行请求总数,默认会执行一个请求 -c concurrency 一次执行多个请 ...

  4. maven多模块tomcat启动报 NoClassDefFoundError:com/test/main/message

    maven多模块tomcat启动报 NoClassDefFoundError:com/test/main/message 扫描不到 添加子模块jar包

  5. 安装sysbench，报错"Could not resolve 'ports.ubuntu.com'"

    在ubuntu系统中安装sysbench时报错“Could not resolve 'ports.ubuntu.com'”怎么办呢? 安装时报错: 亲测可用的方法: 修改 resolv.conf 文件 ...

  6. 16.Linux-CentOS系统进入单用户模式修改root用户密码操作

    问题描述: root用户密码忘记,进入单用户重置root用户密码 解决步骤: 1.重启服务器,在系统显示内核版本界面后“按E键”,进入内核启动项2.找到Linux16这一行段,将“ro”修改成“rw” ...

  7. 搭建jumperserver堡垒机管理万台服务器-2

    搭建jumperserver堡垒机管理万台服务器-2 1  Jumpserver堡垒机概述-部署Jumpserver运行环境 2  安装Coco组件 3  安装Web-Terminal前端-Luna组 ...

  8. Insomni'hack teaser 2019 - Misc - echoechoechoecho

    参考链接 https://ctftime.org/task/7456 题目内容 Echo echo echo echo, good luck nc 35.246.181.187 1337 解题过程 主 ...

  9. 如何解决Bootstrap中分页不能居中的问题

    尝试过1.text-align:center居中:2.margin:0 auto; 3.display: flex;justify-content: center;都不行 解决: 在外层多加一个nav ...

  10. js 调试接口

    在我们做完前端的工作后,很多情况下需要把我们的数据与后端得接口进行对接,说以我们就得掌握调试接口的方法 一.建立对象数组(一般是后端的工作) 代码如下: [ {"name":&qu ...