代码：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

  <!-- 2. 自定义两组样式，来控制 transition 内部的元素实现动画 -->

  <style>

    /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */

    /* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */

    .v-enter,

    .v-leave-to {

      opacity: 0;

      transform: translateX(150px);

    }

    /* v-enter-active 【入场动画的时间段】 */

    /* v-leave-active 【离场动画的时间段】 */

    .v-enter-active,

    .v-leave-active{

      transition: all 0.8s ease;

    }

    .my-enter,

    .my-leave-to {

      opacity: 0;

      transform: translateY(70px);

    }

    .my-enter-active,

    .my-leave-active{

      transition: all 0.8s ease;

    }

  </style>

</head>

<body>

  <div id="app">

    <input type="button" value="toggle" @click="flag=!flag">

    <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->

    <!-- 1. 使用 transition 元素，把 需要被动画控制的元素，包裹起来 -->

    <!-- transition 元素，是 Vue 官方提供的 -->

    <transition>

      <h3 v-if="flag">这是一个H3</h3>

    </transition>

    <hr>

    <input type="button" value="toggle2" @click="flag2=!flag2">

    <transition name="my">

      <h6 v-if="flag2">这是一个H6</h6>

    </transition>

  </div>

  <script>

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        flag: false,

        flag2: false

      },

      methods: {}

    });

  </script>

</body>

</html>

12.自定义v-过渡动画前缀的更多相关文章

  1. iOS学习笔记-自定义过渡动画

    代码地址如下:http://www.demodashi.com/demo/11678.html 这篇笔记翻译自raywenderlick网站的过渡动画的一篇文章,原文用的swift,由于考虑到swif ...

  2. 12 react 基础 的 css 过渡动画 及 动画效果 及 使用 react-transition-group 实现动画

    一. 过渡动画 # index.js import React from 'react';import ReactDOM from 'react-dom';import App from './app ...

  3. Vue相关(过渡动画)

    Vue 过渡 && 动画 一.CSS过渡 1.transition标签可以用来封装需要过渡的元素,添加entering/leaving 过渡, 条件是: (1)使用条件渲染语句 v-i ...

  4. vue过渡动画效果

    1 过渡基础 1.1 过渡的方式 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS ...

  5. vue2.0 之 过渡动画transtion

    过渡的类名: 在进入/离开的过渡中,会有 6 个 class 切换 (v 是前缀,name = v) v-enter:定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移除. v-enter-ac ...

  6. 基于ReactCSSTransitionGroup实现react-router过渡动画

      此前,我使用了react-router库来完成单页应用的路由,从而实现组件之间的切换能力.然而,默认页面的切换是非常生硬的,为了让页面切换更加缓和与舒适,通常的方案就是过渡动画. 这里我调研了2种 ...

  7. vue过渡 & 动画---进入/离开 & 列表过渡

    (1)概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animat ...

  8. Vue.js 第3章 axios&Vue过渡动画

    promise 它将我们从回调地狱中解脱出来 创建和使用 var fs = require('fs') // 创建promise // reslove表示执行成功后调用的回调函数 // reject表 ...

  9. CSS基础篇之背景、过渡动画

    background-origin(背景原点) 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat属性才能生效. background-origin: ...

随机推荐

  1. jquery控制一个元素是否显示

    比如说我有一个id为dlg-buttons的div元素. 我可以通过 $('#dlg-buttons').show(); 让他显示出来: 可以通过 $('#dlg-buttons').hide(); ...

  2. 第十五章 单点登录——《跟我学Shiro》

    目录贴:跟我学Shiro目录贴 Shiro 1.2开始提供了Jasig CAS单点登录的支持,单点登录主要用于多系统集成,即在多个系统中,用户只需要到一个中央服务器登录一次即可访问这些系统中的任何一个 ...

  3. 如何使用 AWS Auto Scaling 按需动态增加和减少实例

    目录 一.背景需求 二.配置步骤 2.1.创建 AMI 2.2.创建负载均衡目标组 2.3.创建 Classic Load Balancer 2.4.创建启动配置 2.5.创建 Auto Scalin ...

  4. SQL 删除数据库

    SQL DROP DATABASE 语句 是一条DDL SQL语句.DROP DATABASE语句用于删除数据库.删除数据库将删除其中的所有数据库对象(表,视图,过程等).用户应具有删除数据库的管理员 ...

  5. selenium + python 环境配置 （四）之启动Firefox

    火狐浏览器自身适配selenium   因此不需要再安装 直接代码启动: __author__ = 'admin' #作者 # -*- coding:utf-8 -*- # 建议所有都加编码 from ...

  6. 日常工作问题解决：centos7下使用yum安装软件报yum.pid锁定

    问题描述: 在centos7下使用yum进行软件安装时报yum.pid已经被锁定,如下所示: [root@centos7-129 ~]# yum -y install dhcp 已加载插件:faste ...

  7. 【Linux内核】编译与配置内核(x86)

    [Linux内核]编译与配置内核(x86)  https://www.cnblogs.com/jamesharden/p/6414736.html

  8. Mui 沉浸模式以及状态栏颜色改变

    手机的顶部状态栏,也就是信号.电量那条,有4种状态,分别是正常.变色.透明(也称沉浸式状态栏).消失(也就是全屏).后3种特殊用法,具体见下: 这些都是真机运行不生效,需提交App云端打包后才生效: ...

  9. golang设置运行的核数

    package main import ( "fmt" "runtime" ) //设置golang运行的核数 //1.8 版本以上的会自动设置 func ma ...

  10. SAS学习笔记7 合并语句（set、merge函数）

    set函数:纵向合并数据集 set语句进行纵向合并.set语句的作用是将若干个数据集依次纵向连接,并存放到data语句建立的数据集中.若set后面只有一个数据集,此时相当于复制的作用 注:data语句 ...