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. vue provide/inject 父组件如何给孙子组件传值

    一般情况下我们父子组件之间的传值用的是props,这个就不多说了,但是如果想让父组件给子组件的组件传值怎么办呢,如果还用props的话肯能会比较复杂,这里我们就可以用到 provide 和 injec ...

  2. css雪碧图（精灵图）与字体图标的介绍以及对比

    css雪碧图(精灵图)与字体图标的介绍以及对比 设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这 ...

  3. LeetCode Array Easy 1. Two Sum

    Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...

  4. Cannot proxy target class because CGLIB2 is not available .Add CGLIB to the class path or specify proxy interfaces…..

    报错:Cannot proxy target class because CGLIB2 is not available .Add CGLIB to the class path or specify ...

  5. Sql批量修改语句

    修改某个数字类型字段 SET @num = 10000000000001; #定义初始化变量参数 UPDATE ckys_me #更新的表 SET openid = (@num := @num+1) ...

  6. 2018焦作网络赛-E- Jiu Yuan Wants to Eat

    题目描述 You ye Jiu yuan is the daughter of the Great GOD Emancipator.  And when she becomes an adult, s ...

  7. Codeforces 1163F 最短路 + 线段树 （删边最短路）

    题意:给你一张无向图,有若干次操作,每次操作会修改一条边的边权,每次修改后输出1到n的最短路.修改相互独立. 思路:我们先以起点和终点为根,找出最短路径树,现在有两种情况: 1:修改的边不是1到n的最 ...

  8. Android中App可分配内存的大小（转）

    转自:http://blog.csdn.net/u011506413/article/details/50965435 现在真实测试结果: 1,为了搞清楚每个应用程序在Android系统中最多可分配多 ...

  9. oracle hint 强制索引（转）

    oracle 1.建议建立一个以paytime,id,cost的复合索引.光是在paytime上建立索引会产生很多随机读.2.就算建立了索引,如果你查询的数据量很大的话,也不一定会用索引,有时候全表扫 ...

  10. 【JavaWeb项目】一个众筹网站的开发（八）后台页面详细设置

    一.user.jsp改造 删除引入菜单 抽取导航栏 nav-bar.jsp,删除引入导航栏 删除引入main.jsp的到好烂 数据库里添加url 报错,url不对 没有/ url正确 action=& ...