<!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. 在springboot中，如何读取配置文件中的属性

    摘要:在比较大型的项目的开发中,比较经常修改的属性我们一般都是不会在代码里面写死的,而是将其定义在配置文件中,之后如果修改的话,我们可以直接去配置文件中修改,那么在springboot的项目中,我们应 ...

  2. 基于MRS-Hudi构建数据湖的典型应用场景介绍

    摘要:华为云FunsionInsight MRS已集成Apache Hudi 0.8版本,基于MRS-Hudi构建数据湖解决方案. 本文分享自华为云社区<基于MRS-Hudi构建数据湖的典型应用 ...

  3. Java 17 从 Solon 开始入手，v1.10.0

    相对于 Spring Boot 和 Spring Cloud 的项目: 启动快 5 - 10 倍. (更快) qps 高 2- 3 倍. (更高) 运行时内存节省 1/3 ~ 1/2. (更少) 打包 ...

  4. 阿里云 AI 编辑部获 CCBN 创新奖，揭秘传媒行业解决方案背后的黑科技

    5 月 27 日,CCBN(第二十八届中国国际广播电视信息网络展览会)在北京隆重召开,在本次的 "CCBN 年度创新奖" 评选中,阿里云视频云凭借AI 编辑部的传媒行业专业解决方案 ...

  5. C# Task 多任务：C# 扩展TaskScheduler实现独立线程池，支持多任务批量处理，互不干扰，无缝兼容Task

    先上源码: https://gitee.com/s0611163/TaskSchedulerEx     为什么编写TaskSchedulerEx类? 因为.NET默认线程池只有一个线程池,如果某个批 ...

  6. Windows 端使用 C++ 服务操作类

    #pragma once #include <windows.h> #include <string> // #include <iostream> class S ...

  7. mybatis-plus 对date类型取当天的数据

    数据库中的字段是时间类型,要取出当天的数据,使用mybatis-plus 如何实现,思路是用 时间大于当天凌晨,小于当天23:59:59的时间 //调用的代码Date start = DateUtil ...

  8. vue学习笔记 一、环境搭建

    系列导航 vue学习笔记 一.环境搭建 vue学习笔记 二.环境搭建+项目创建 vue学习笔记 三.文件和目录结构 vue学习笔记 四.定义组件(组件基本结构) vue学习笔记 五.创建子组件实例 v ...

  9. P1185【绿】

    这道题是画图题,画图题当画布总大小较小的时候其实可以先创建一个二维数组,这样就可以实现随意移动"光标"式的画图,然后直接输出处理后的画布即可,只要注意题目要求的数据范围足够小.画布 ...

  10. Go ASM 学习笔记之 ppt 版

    在 小白学标准库之反射 reflect 篇中介绍了接口和反射.然而,对于接口的类型转换,底层实现还是一知半解.在参考 Go 语言设计与实现 这本书接口章节时,又看不大懂.一个拦路虎摆在面前:汇编.不懂 ...