<!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. 破解数据匮乏现状：纵向联邦学习场景下的逻辑回归（LR）

    摘要:主要介绍了华为云可信智能计算服务(TICS)采用的纵向联邦逻辑回归(LR)方案. 本文分享自华为云社区<纵向联邦学习场景下的逻辑回归(LR)>,作者: 汽水要加冰. 海量训练数据是人 ...

  2. Jmeter对各种接口类型的测试

    JMeter对各种类型接口的测试 默认做接口测试前,已经给出明确的接口文档(如,http://test.nnzhp.cn/wiki/index.php?doc-view-59):本地配好了JMeter ...

  3. Go--命名规则

    在Go语言中,项目名和文件名的命名规则有一些建议和惯例.以下是一些常见的规则和最佳实践: 项目名: 项目名应该简短.有意义,并能够清晰地表达项目的目的或功能. 项目名通常使用小写字母,使用连字符或下划 ...

  4. L1-020 帅到没朋友 (20分)

    当芸芸众生忙着在朋友圈中发照片的时候,总有一些人因为太帅而没有朋友.本题就要求你找出那些帅到没有朋友的人. 输入格式: 输入第一行给出一个正整数N(≤100),是已知朋友圈的个数:随后N行,每行首先给 ...

  5. Codeforces Round #544 (Div. 3)简单题解

    复健,时间有限题解比较简陋 A. Middle of the Contest 将小时转成分钟,得到起止时间在一天中的分钟数,取平均值即可,复杂度O(1).平均值转换会时间的时候注意前导0. void ...

  6. echarts 饼图 点击事件

    https://www.cnblogs.com/wcnwcn/p/11170279.html

  7. java进阶(17)--Random

    一.Random随机数 java.unil.Random类 Random randomnum = new Random(); int num = randomnum.nextInt();   二.举例 ...

  8. JavaScriptif while for switch流程控制 JS函数 内置对象

    1,if else语句 2,if else if else语句 3,switch语句 4,for循环 5,while循环 6,三元运算 7,JS中的函数 8,JS中的匿名函数 9,JS中的立即执行函数 ...

  9. 每天学五分钟 Liunx 110 | 存储篇:RAID

    RAID RAID 是廉价磁盘冗余阵列(Redundant Array of Inexpensive Disks)的意思.通过它可以将较小的磁盘组成较大的磁盘.   RAID 模式 RAID 有几种模 ...

  10. c#(nanoframework)安装单片机环境；如何使用c#写类似于c的单片机驱动

    .NET nanoFramework 安装教程 准备材料​ esp32单片机(支持wifi蓝牙) 安卓数据线(需要支持传输) 注意!请先安装esp32驱动程序​ ESP32驱动链接 安装 .NET n ...