1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  7. </head>
  8.  
  9. <style>
  10.     .v-enter,
  11.     .v-leave-to{
  12.         opacity: 0;
  13.         transform: translateX(100px);
  14.     }
  15.     .v-enter-active,
  16.     .v-leave-active{
  17.         transition: all 0.4s ease;
  18.     }
  19.  
  20. </style>
  21.  
  22. <body>
  23.     <div id="app">
  24.  
  25.         <input type="button" value="点击我显示/取消" @click="flag=!flag">
  26.  
  27.         <transition>
  28.             <h3 v-if="flag">先希望你孝顺 再愿你成熟努力 一是责任 而是安全感 很想遇到这种人 最好可以晚一点
  29.             不要心急也不要焦虑 等我们远离时常赌气的年纪 懂得包容和鼓励 也许你是对的人
  30.             但现在不是对的时间 等你 也等自己</h3>
  31.         </transition>
  32.  
  33.         <h2>凡人总有取舍 你取了你认为重要的东西 舍弃了我 这只是你的选择而已 若是我因为我没有被选择就心生怨恨
  34.             那这世间 岂不是有太多不可原谅之处 毕竟谁也没有责任要以我为先 以我为重 无论我如何希望 也不能强求</h2>
  35.     </div>
  36.  
  37.     <script>
  38.  
  39.         var app = new Vue({
  40.             el: '#app',
  41.             data:{
  42.               flag: false
  43.  
  44.             },
  45.             methods: {
  46.  
  47.             },
  48.             created: function () {
  49.  
  50.             },
  51.             mounted: function () {
  52.  
  53.             }
  54.         })
  55.  
  56.     </script>
  57. </body>
  58. </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. Springboot+Mybatis AOP注解动态切换数据源

    在开发中因需求在项目中需要实现多数据源(虽然项目框架是SpringCloud,但是因其中只是单独的查询操作,觉得没必要开发一个项目,所以采用多数据源来进行实现) 1.在配置文件中创建多个数据连接配置 ...

  2. vscode学习（三）之如何修改打开终端的默认shell

    实现 第一步:打开VSCode的设置(Preferences>User Settings) 第二步:搜索terminal.integrated.shell.osx 的 并把它的值改为你的zsh安 ...

  3. HTML弹性布局

    1.弹性布局的使用 (1)  display:flex:给父容器添加这个属性: (2)  display:flex; 容器添加弹性布局后,显示为块级元素: display:inline-flex; 容 ...

  4. lldb调试命令

    XCode4.0以后,编译器换成了LLVM 编译器 2.0 与以前相比,更加强大:1.LLVM 编译器是下一带开源的编译技术.完全支持C, Objective-C, 和 C++.2.LLVM 速度比 ...

  5. windows使用cmd命令输出文件清单和文件树

    输出目录树:tree /f > d:\filetree.txt 输出目录清单:dir /s /b > d:\filelist.txt

  6. rest_framework框架的版本

    REST_FRAMEWORK = { 'DEFAULT_RENDERER_CLASSES':['rest_framework.renderers.JSONRenderer','rest_framewo ...

  7. Codeforces1221D. Make The Fence Great Again（dp）

    题目链接:传送门 思路: 仔细想一下可以发现:每个位置最多就增加2个高度. 所以就可以有状态: f[i][j]表示保证前i个篱笆都是great时,第i个篱笆增加j的高度所需要的最小花费(1 <= ...

  8. complementary error function

    首先正态分布的概率密度函数为: P{|X-μ|<σ}=2Φ(1)-1=0.6826,  P{|X-μ|<2σ}=2Φ(2)-1=0.9544,  P{|X-μ|<3σ}=2Φ(3)- ...

  9. 使用glew和glad 新建窗口

    一.添加头文件 首先,将头文件加到项目的.cpp文件中 #include <glad/glad.h> 2 #include <GLFW/glfw3.h> 注: 包含glad的头 ...

  10. Symbol的isConcatSpreadable方法

    Symbol.isConcatSpreadable 布尔值,对象用于Array.prototype.concat()时,是否可以展开 let arr1 = ['c', 'd']; ['a', 'b'] ...