demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vue实例</title>
  6.   <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
  7.     <style style="text/css">
  8.       .sni-enter-active,.sni-leave-enter {
  9.         transition:all .5s linear;
  10.  
  11.       }
  12.       .sni-enter,.sni-leave-active {
  13.         opacity:0.5;
  14.         transform:translateX(100px);
  15.       }
  16.  
  17.     </style>
  18. </head>
  19. <body>
  20. <div id="my">
  21.   <button @click="show = !show">查看我的变化</button>
  22.   <transition name="sni">
  23.     <div v-if="show">
  24.       请看我的变化
  25.     </div>
  26.   </transition>
  27.  
  28. </div>
  29. <script>
  30.    new Vue ({
  31.      el:'#my',
  32.      data:{
  33.        show:true
  34.      }
  35.    })
  36. </script>
  37. </body>
  38. </html>

效果：

vue 单元素过渡的更多相关文章

  1. Vue多元素过渡

    前面的话 前面分别介绍了单元素过渡的CSS过渡和JS过渡,本文将详细介绍Vue多元素过渡 常见示例 最常见的多标签过渡是一个列表和描述这个列表为空消息的元素: <transition> & ...

  2. vue单元素/组件的过渡

    (1)过渡的类名 v-enter:定义进入过渡的开始状态.在元素被插入之前生效,在元素被插入之后的下一帧移除. v-enter-active:定义进入过渡生效时的状态.在整个进入过渡的阶段中应用,在元 ...

  3. VUE 表单元素双向绑定总结

    checkbox最基本用法: <input type="checkbox" v-model="inputdata" checked/> <in ...

  4. vue教程1-01 v-model 一般表单元素(input) 双向数据绑定

    vue教程1-01   v-model 一般表单元素(input) 双向数据绑定el:'#box',//这里放的是选择器.不然会不生效 <!DOCTYPE html> <html l ...

  5. 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定

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

  6. 066_末晨曦Vue技术_过渡 & 动画之多个元素的过渡

    多个元素的过渡 点击打开视频讲解更加详细 我们之后讨论多个组件的过渡,对于原生标签可以使用 v-if/v-else.最常见的多标签过渡是一个列表和描述这个列表为空消息的元素: <transiti ...

  7. CSS3过渡结束监听事件,清除/修改表单元素的一些默认样式

    document.querySelector('div').addEventListener('transitionEnd',function(){ console.log('过度结束') }) 如果 ...

  8. vue总结 04过渡--进入/离开 列表过渡

    进入/离开 & 列表过渡 概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CS ...

  9. Vue——关于css过渡和动画那些事

    1. 单元素/组件的过渡transition Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v ...

随机推荐

  1. 检查目录下 文件的权限-linux shell脚本

    #!/bin/bash #History: #2019/07/23    Fsq #This Program will check Permissions on dir PATH=/bin:/sbin ...

  2. 每天一个Linux常用命令 cat命令

    在Linux系统中,cat命令是一个文本输出命令,通常用来查看某个文档的内容.它有如下三个功能: 1.一次性显示整个文件 如:查看/etc/initab文件,可以使用命令:cat/etc/initta ...

  3. docker提示没有开启转发解决方法

    vim  /usr/lib/sysctl.d/00-system.conf [root@t1 ~]# vim /usr/lib/sysctl.d/00-system.conf# Kernel sysc ...

  4. rstrip

    ====== rstrip ====== Description Returns a copy of the string with trailing characters removed. Synt ...

  5. 【leetcode】667. Beautiful Arrangement II

    题目如下: Given two integers n and k, you need to construct a list which contains ndifferent positive in ...

  6. Vue学习笔记【16】——vue-resource 实现 get, post, jsonp请求

    除了 vue-resource 之外,还可以使用 axios 的第三方包实现实现数据的请求 之前的学习中,如何发起数据请求?原生.jQuery,需要操作DOM 常见的数据请求类型? get post ...

  7. Android中的Handler,Looper,Message机制

    Android的消息处理有三个核心类:Looper,Handler和Message.其实还有一个Message Queue(消息队列),但是MQ被封装到Looper里面了,我们不会直接与MQ打交道,因 ...

  8. CSS3 图形变换

    1.zoom  和  transform:scale  的区别   :    http://www.zhangxinxu.com/wordpress/2015/11/zoom-transform-sc ...

  9. Python100天打卡

    基于tkinter模块的GUIPython默认的GUI开发模块是tkinter(在Python 3以前的版本中名为Tkinter)使用tkinter来开发GUI应用需要以下5个步骤: 导入tkinte ...

  10. windows API 创建系统托盘图标

    系统托盘在我们使用的程序中很普遍,下面我们来看一个很不错的例子,使用Win32 API实现,对理解系统托盘有些帮助. [cpp] view plaincopy #include <windows ...