<!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="../vue.js"></script>

    <style>

        /*

        v-enter       这是进入之前;元素的起始状态;此时还没有开始进入

        v-leave-to   是动画离开之后;离开的终止状态;此时元素的动画已经结束

        .v-enter-active  入场动画的时间段

        .v-leave-active   离场动画的时间段

        */

        h3 {

            width: 200px;

        }

        .v-enter,

        .v-leave-to {

            opacity: 0.8;

            /* 说明起始状态是在右侧80px处的 */

            transform: translateX(200px);

        }

        .v-enter-active,

        .v-leave-active {

            transition: all 0.6s ease;

        }

    </style>

</head>

<body>

    <div id="app">

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

        <transition>

            <!-- transition是vue官方提供的  使用transition元素 把需要被动画控制的元素  包裹起来哦 -->

            <h3 v-show="flag">这是内容</h3>

        </transition>

    </div>

    <script>

        var vm = new Vue({

            el: "#app",

            data: {

                flag: false

            },

            methods: {

                toggle() {

                    this.flag = !this.flag;

                }

            },

        })

    </script>

</body>

</html>


    <style>

       /* v-enter   这是进入之前  元素的起始状态   此时还没有开始进入

          v-leave-to   是动画离开之后  离开的终止状态   此时 元素的动画已经结束

         .v-enter-active  入场动画的时间段

         .v-leave-active离场动画的时间段

        */

        .my-enter,.my-leave-to{

            opacity: 0;

            transform: translateY(80px);

        }

         .my-enter-active,.my-leave-active{

             transition: all 0.6s ease;

         }

    </style>

<div id="app">

   <input type="button" value="toggle2" @click="toggle">

   <transition name="my">  <!--  这就是自定义的前缀名称   表示my开发实现自定义的动画-->

      <!-- transition是vue官方提供的  使用transition元素 把需要被动画控制的元素  包裹起来哦 -->

      <h3 v-if="flag2">这是内容</h3>

   </transition>

</div>

<script>

   var vm=new Vue({

       el:"#app",

       data:{

         flag:false,

         flag2:false

       },

       methods: {

        toggle(){

            this.flag2=!this.flag2;

        }

       },

   })

</script>

vue动画进入-完整的动画/有进入离开的更多相关文章

  1. Vue.js 相关知识（动画）

    1. 简介 Vue 在插入.更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:&l ...

  2. Vue使用过渡类名实现动画和自定义前缀

    Vue使用过渡类名实现动画和自定义前缀 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> ...

  3. vue.js加入购物车小球动画

    生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画 动画的内容分别是外层和内层,外层控制动画小 ...

  4. 黑马vue---46、vue使用过渡类名实现动画

    黑马vue---46.vue使用过渡类名实现动画 一.总结 一句话总结: vue动画的过渡类名的时间点中没有设置样式的话就是默认的样式 使用 transition 元素,把 需要被动画控制的元素,包裹 ...

  5. vue移动端转场动画

    vue移动端转场动画 1.介绍:使用vue移动端做项目的时候,为了用户的体验良好,我们需要页面有一种进入和转出的效果 // 在App.vue根组件中 <template> <div ...

  6. 动画---图形图像与动画(三)Animation效果的XML实现

    使用XML来定义Tween Animation 动画的XML文件在工程中res/anim目录,这个文件必须包含一个根元素,可以使<alpha><scale> <trans ...

  7. 动画(Animation) 、 高级动画(Core Animation)

    1 演示UIImage制作的动画 1.1 问题 UIImage动画是IOS提供的最基本的动画,通常用于制作一些小型的动画,本案例使用UIImage制作一个小狗跑动的动画,如图-1所示: 图-1 1.2 ...

  8. iOS开发——动画篇Swift篇&动画效果的实现

    Swift - 动画效果的实现   在iOS中,实现动画有两种方法.一个是统一的animateWithDuration,另一个是组合出现的beginAnimations和commitAnimation ...

  9. CoreAnimation4-隐式动画和显式动画

    事务 Core Animation基于一个假设,说屏幕上的任何东西都可以(或者可能)做动画.动画并不需要你在Core Animation中手动打开,相反需要明确地关闭,否则他会一直存在. 当你改变CA ...

  10. jQuery-1.9.1源码分析系列（十五） 动画处理——缓动动画核心Tween

    在jQuery内部函数Animation中调用到了createTweens()来创建缓动动画组,创建完成后的结果为: 可以看到上面的缓动动画组有四个原子动画组成.每一个原子动画的信息都包含在里面了. ...

随机推荐

  1. 云小课丨SA基线检查：给云服务来一次全面“体检”

    摘要:随着企业上云进程的加快,由于云服务配置不合理.不合规等引发的安全风险与日俱增.如果没有加以重视并做及时的诊断处置,将会对企业云上业务带来巨大的安全隐患. 本文分享自华为云社区<云小课丨安全 ...

  2. 100天搞定机器学习|Day59 主成分分析(PCA)原理及使用详解

    数学概念 方差:用来衡量随机变量与其数学期望(均值)之间的偏离程度.统计中的方差(样本方差)是各个数据分别与其平均数之差的平方的和的平均数. $$Var(X)=\frac{1}{n}\sum(x_i- ...

  3. C# NLog 配置

    首先用NuGet安装NLog依赖DLL NLog NLog.Config NLog.Schema NLog配置文件NLog.config: <?xml version="1.0&quo ...

  4. SpringBoot 项目实战 | 瑞吉外卖 Day01

    一.软件开发整体介绍 1.软件开发流程 2.角色分工 项目经理:对整个项目负责,任务分配.把控进度 产品经理:进行需求调研,输出需求调研文档.产品原型等 UI设计师:根据产品原型输出界面效果图 架构师 ...

  5. #1495：非常可乐（BFS+数论）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1495 BFS解法 题目 给三个数字 s n m s=n+m s在1到100之间 就是个倒水问题可以从第 ...

  6. 【动态规划】动态规划基础 （OI wiki）

    文章来自 OI wiki ,转载仅作学习使用 动态规划应用于子问题重叠的情况: 要去刻画最优解的结构特征: 尝试递归地定义最优解的值(就是我们常说的考虑从 \(i - 1\) 转移到 \(i\)): ...

  7. OpenTSDB 数据存储详解

    本文首发于 vivo互联网技术 微信公众号链接: https://mp.weixin.qq.com/s/qayKiwk5QAIWI7-nyD3FVA作者:DuZhimin 随着互联网.尤其是物联网的发 ...

  8. Function--jdk8用法

    Lambda表达式.首先是参数部分,接着是->,可以视为产出,->之后的内容都是方法体. 当只有一个参数时,可以不需要括号(): 正常情况使用()包裹参数,为了保持一致性,也可以使用括号( ...

  9. SpringBoot-mybatisplus-模糊查询

    模糊查询如何实现如下案例中两种实现方法 第一种:利用QueryWrapper.like自己实现. 第二种:使用@TableField(condition = SqlCondition.LIKE)实现. ...

  10. /etc/profile，/etc/bashrc，~/.profile，~/.bashrc 的区别及使用

    转载请注明出处: /etc/profile  为系统的全局环境变量设置,此文件为系统的每个用户设置环境信息    /etc/bashrc 为每一个运行bash shell的用户执行此文件.当bash ...