demo

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue实例</title>

  <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

    <style style="text/css">

      .sni-enter-active,.sni-leave-enter {

        transition:all .5s linear;

      }

      .sni-enter,.sni-leave-active {

        opacity:0.5;

        transform:translateX(100px);

      }

    </style>

</head>

<body>

<div id="my">

  <button @click="show = !show">查看我的变化</button>

  <transition name="sni">

    <div v-if="show">

      请看我的变化

    </div>

  </transition>

</div>

<script>

   new Vue ({

     el:'#my',

     data:{

       show:true

     }

   })

</script>

</body>

</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. 算法竞赛模板 KMP

    KMP算法图解: ① 首先,字符串“BBC ABCDAB ABCDABCDABDE”的第一个字符与搜索词“ABCDABD”的第一个字符,进行比较.因为B与A不匹配,所以搜索词后移一位. ② 因为B与A ...

  2. 使用postman请求响应Invalid CORS request

    响应结果 解决方法: 下载之后解压,在Chrome浏览器,打开扩展 chrome://extensions/ 点击“加载已解压的扩展程序”添加我们解压的包,或者直接拖拽.之后我们就可以看到Postma ...

  3. RemoTing 搭建简单实现

    今天对C# Remoting进行了初步的学习,废话不说... RemotingModel: Talker.cs using System;using System.Collections.Generi ...

  4. web.xml中配置——解决post乱码

    <!-- 解决post乱码 --> <filter> <filter-name>CharacterEncodingFilter</filter-name> ...

  5. PHP构建一句话木马

    构建一句话木马,密码为simple: url/search.php?searchtype=5&tid=&area=eval($_POST[simple]) 之后使用菜刀进行链接,密码为 ...

  6. 理解First-Class Functions

    def logger(msg): def log_message(): print('Log:', msg) return log_message # 返回的是函数 log_hi = logger(' ...

  7. php文件锁阻塞模式和非阻塞模式

    1.阻塞模式(如果其它进程已经加锁文件,当前进程会等其它进程解锁后继续执行) <?php $handle = fopen('lock.txt', 'r'); //锁定 if(flock($han ...

  8. leetcode-161周赛-1250-检查好数组

    题目描述: 唯一的结论是如果数组中所有数的最大公约数为 1,则存在解,否则不存在.所以只需要计算所有数最大公约数即可,时间复杂度O(nlog(m)),其中 m 为数字大小. class Solutio ...

  9. NX二次开发-BlockUI对话框嵌套MFC对话框制作进度条

    半年前在一些QQ群看到有大神NX二次开发做出了进度条,那个时候我还不会弄,也不知道怎么弄得,后来断断续续得研究了一下,直到今天我把它做出来了.内心还是很喜悦的!回想自己这两年当初从没公司肯给我做NX二 ...

  10. （转）OpenFire源码学习之九：OF的缓存机制

    转:http://blog.csdn.net/huwenfeng_2011/article/details/43415023 关于缓存,openfire存储到了本地JVM中.本人认为这样并不是很好.以 ...