<!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">

    <!-- 这里设置了name的值就可以不用v-前缀 设置样式-->

    <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>

Vue 原生动画的更多相关文章

  1. 从零开始学 Web 之 Vue.js（五）Vue的动画

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. 使用Lottie将AE项目转换为 Web 原生动画

    使用Lottie转换AE项目为 Web 原生动画 首先打开链接https://github.com/airbnb/lottie-web/blob/master/build/extension/body ...

  3. vue 的动画

    1.vue 的动画流程分为enter,和leave分别对应以下两幅图 <!doctype html><html lang="en"><head> ...

  4. Bodymovin：Bodymovin和Lottie：把AE动画转换成HTML5/Android/iOS原生动画

    转自:https://www.cnblogs.com/zamhown/p/6688369.html 大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画 ...

  5. 大杀器Bodymovin和Lottie：把AE动画转换成HTML5/Android/iOS原生动画

    前段时间听部门老大说,Airbnb出了个移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/iOS原生动画的形 ...

  6. 049——VUE中使用animation与transform实现vue的动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. vue的动画组件（transition）

    当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理: 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名. v-enter: 定 ...

  8. vue学习指南：第十篇(详细) - Vue的 动画

    Vue 提供了一些不同的过度效果,主要根 v-if v-show 动态组件 1. Vue给动画分了6个过程,在css中,扮演6个类, 1.  .v-enter定义动画的开始状态 2.  .v-ente ...

  9. Vue+原生App混合开发手记#1

    项目的大致需求就是做一个App,里面集成各种功能供用户使用,其中涉及到很多Vue的使用方法,单独总结太麻烦,所以通过这几篇笔记来梳理一下.原型图如下: 路由配置 主界面会用到一些原生App方法,比如验 ...

随机推荐

  1. phpExcel 操作示例

    片段 1 片段 2 phpExcel 操作示例 <?php //写excel //Include class require_once('Classes/PHPExcel.php'); requ ...

  2. Vijos1775 CodeVS1174 NOIP2009 靶形数独

    靶形数独 描述 小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他 们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向 Z博士请教, Z 博士拿出了他最近发 ...

  3. Nginx教程(6) 动静分离架构 （转）

    一.原理 Nginx 动静分离简单来说就是把动态跟静态请求分开,不能理解成只是单纯的把动态页面和静态页面物理分离.严格意义上说应该是动态请求跟静态请求分开,可以理解成使用Nginx 处理静态页面,To ...

  4. 两种最常用的 HTTP 方法：GET 和 POST。

    什么是 HTTP? 超文本传输协议(HTTP)的设计目的是保证客户机与服务器之间的通信. HTTP 的工作方式是客户机与服务器之间的请求-应答协议. web 浏览器可能是客户端,而计算机上的网络应用程 ...

  5. HDU_1005:Number Sequence

    Problem Description A number sequence is defined as follows: f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1 ...

  6. H5+ 分享到微信、朋友圈代码示例

    h5+分享到微信.朋友圈代码示例 在使用分享功能的时候会莫名的分享失败,debug时发现是图片过大的问题. 图片过大时ios平台上返回错误码-8,安卓上返回错误码-3(我测试是这样) 因此如果第一次分 ...

  7. poj 1085 Triangle War （状压+记忆化搜索）

    Triangle War Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2685   Accepted: 1061 Desc ...

  8. Flask学习之十一 邮件支持

    英文博客地址:blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-xi-email-support 中文翻译地址:http://www. ...

  9. C运行时库函数和API函数的区别和联系

    C运行时库函数 C运行时库函数是指C语言本身支持的一些基本函数,通常是汇编直接实现的.    API函数 API函数是操作系统为方便用户设计应用程序而提供的实现特定功能的函数,API函数也是C语言的函 ...

  10. python selenium 测试 LOG

    1.首先在根目录中新建一个Logs文件夹,写入文件 2.在framework文件夹中写入logger.py 3.在testsuits文件夹中写入test_log.py logger.py # _*_ ...