<!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. git LF will be replaced by CRLF in hellogit.txt

    这个是换行符的问题 参见:https://blog.csdn.net/starry_night9280/article/details/53207928

  2. (ES6)数据处理常用工具方法收集(更新状态: on)

    1. 扁平数组转成tree结构(来源: StackOverflow的印度老哥写的) // Data Set // One top level comment var comments = [{ id: ...

  3. Java全排列递归算法

    Java全排列算法: 第一遍循环:将list数组index==0的元素依次与数组的每个元素交换,从而保证index==0的位置先后出现n个不同元素之一,实现对index==0位置的遍历. 第 i 遍循 ...

  4. 使用HashSet实现不重复的随机数

    package demo; import java.util.HashSet; import java.util.Random; public class RandomDemo { public st ...

  5. 实现自己的BeanFactory、AOP以及声明式事务

    实现自己的BeanFactory                                                                   在使用spring时,我们很少用& ...

  6. 将windows下的文件复制到linux

    首先先将你xshell配置好用户名及密码等,必须使用有权限下载的账号进行操作. 使用 yum provides */rz 这条命令,查看你系统自带的软件包的信息.可以看到下方有具体的输出. 2 在输出 ...

  7. varnish流程图

    varnish流程图

  8. 查看jar包内容

    查看jar包内容 查看jar包内容的基本命令: jar tf jar-file 参数解释: The t option indicates that you want to view the table ...

  9. Mysql数据库常见试题

    引用自http://blog.csdn.net/laoniyouxi123/article/details/51161157 sql语句应该考虑哪些安全性? 答: (1)防止sql注入,对特殊字符进行 ...

  10. 在asp.net 中怎样上传文件夹

    以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传  ...