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. .net微信扫码支付

    今天给大家分享一篇.net的扫码支付文章,话不多说直接进入主题. 如有需要可以加我Q群[308742428]大家一起讨论技术,有偿服务. 后面会不定时为大家更新文章,敬请期待. 喜欢的朋友可以关注下. ...

  2. texi2dvi - 打印 Texinfo 文档

    SYNOPSIS 总览 texi2dvi [OPTION]... FILE... DESCRIPTION 描述 依次从 Tex 系统中运行每个 Texinfo 或者 LaTex 文件 FILE,直到解 ...

  3. linux常用命令-1系统相关命令

    hostname #计算机名 passwd #修改密码 reboot #重启 shutdown –r now #立刻重启(root用户使用) shutdown –r 10 #过10分钟自动重启(roo ...

  4. 【学术篇】CF833B TheBakery 分治dp+主席树

    题目の传送门~ 题目大意: 将\(n\)个蛋糕分成恰好\(k\)份, 求每份中包含的蛋糕的种类数之和的最大值. 这题有两种做法. 第一种是线段树优化dp, 我还没有考虑. 另一种就是分治+主席树. 然 ...

  5. Java对象什么时候可以被垃圾回收？JVM的永久代中会发生垃圾回收么？

    当对象对当前使用这个对象的应用程序变得不可触及的时候,这个对象就可以被回收了.垃圾回收不会发生在永久代,如果永久代满了或者是超过了临界值,会触发完全垃圾回收(Full GC).如果你仔细查看垃圾收集器 ...

  6. 安装配置oh-my-zsh

    1.下载安装iterm:https://www.iterm2.com/ 2.安装zsh 查看系统当前使用的shell $ echo $SHELL /bin/bash 查看系统是否安装了zsh $ ca ...

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

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

  8. winform中动态生成多行label，同时添加滚动条

    设计思路大概是这样的,Form内添加一个groupBox,groupBox内添加一个panel,panel的属性AutoScroll=true,在panel内动态添加label. 原始From如下: ...

  9. leetcode-12双周赛-1244-力扣排行榜

    题目描述: class Leaderboard: def __init__(self): self.map = collections.Counter() def addScore(self, pla ...

  10. 离线+生成树+并查集——cf1213G

    #include<bits/stdc++.h> using namespace std; #define N 200005 #define ll long long struct Edge ...