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. CSS3中的transform转换属性

    属性 transition-property 定义对象中参与过度的属性 transition-delay 延迟 transition-duration 持续时间 transition-timing-f ...

  2. Android开发环境部署：JDK+Android Studio

    1. 刚开始接触Android开发,首先需要为你的电脑安装java JDK(Java开发工具包),不管是用Eclipse还是Android Studio都需要只吃Java语言运行吧. 官网:Oracl ...

  3. freemarker在web应用项目的使用

    FreeMarker是一个用Java语言编写的模板引擎,它基于模板来生成文本输出.FreeMarker与Web容器无关,即在Web运行时,它并不知道Servlet或HTTP.它不仅可以用作表现层的实现 ...

  4. Codeforces 348D DP + LGV定理

    题意及思路:https://www.cnblogs.com/chaoswr/p/9460378.html 代码: #include <bits/stdc++.h> #define LL l ...

  5. git安装和使用方法url

    1.如何在ubuntu下使用Github? https://blog.csdn.net/tina_ttl/article/details/51326684 https://segmentfault.c ...

  6. leetcode-13双周赛-1256-加密数字

    题目描述:编码 方法一: class Solution(object): def encode(self, n): if n == 0: return "" n -= 1 A = ...

  7. Delphi 堆栈 [ heap(堆) 和 stack(栈) ]

    程序需要的内存空间分为 heap(堆) 和 stack(栈); heap(堆) 是自由存储区, stack(栈) 是自动存储区; 使用 heap 需要手动申请.手动释放, 使用 stack 是自动申请 ...

  8. 【LeetCode 5】 最长回文子串

    题目链接 描述 [题解] 一个讲得比较好的博客地址; 感觉manacher算法的大概思路就是利用回文串左右对称的性质. 利用之前算出来的以某个点为中心的回文串.而当前要枚举的串被包括在其中. 则可以用 ...

  9. 数学二分——cf700A

    二分答案 #include<bits/stdc++.h> using namespace std; #define ll long long int n,l,v1,v2,k; double ...

  10. Sql生成 Insert 语句

    declare @TableName sysname select @TableName = 'T_OOSOrder' declare @result varchar(max) = 'INSERT I ...