<!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. 下一代APP Store——GPT应用商店GPTs初体验

    uploading-image-126879.png 近期,OpenAI宣布GPT应用商店正式上线,目前拥有plus的用户已经可以体验了. OpenAI将GPT应用商店命名为GPTs,这也是之前发布会 ...

  2. Solon 路由的 Url 大小写匹配与事项注意

    Solon 路由器对 url 的匹配默认是 "忽略大小写" 的.如果有需要,可以强制开启:v2.2.14 后支持 @SolonMain public class App{ publ ...

  3. CF：706B. Interesting drink （二分查找）

    题意:不同奶茶店里同样的奶茶价格不同,问在当天Yuki持有的零钱能在几家店购买 思路:对价格数组排序,先优先判断是否会比较最大值和最小值,然后二分查找 #include<bits/stdc++. ...

  4. 0x68 - C题：車的放置

    链接:https://ac.nowcoder.com/acm/contest/1062/C 题目描述 给定一个N行M列的棋盘,已知某些格子禁止放置. 问棋盘上最多能放多少个不能互相攻击的車. 車放在格 ...

  5. 关于“Github上传以及Clone时发生的 Failed to connect to github.com port 443: Timed out 问题解法记录

    本文是记录关于如何解决 "Github上传以及Clone时发生的 Failed to connect to github.com port 443: Timed out 错误" 看 ...

  6. 数字孪生智慧物流之 Web GIS 地图应用

    前言 随着数字经济时代的来临,新一轮全球化进程速度加快,在大数据.人工智能.物联网等高新技术深度融合下,加快催化智慧物流发展,引领物流行业划入全新时代. 从物流运输到货物分拣再到站点配送,图扑软件数据 ...

  7. uni-app项目打包成H5部署到服务器(超详细步骤)

    https://blog.csdn.net/weixin_49577940/article/details/118058899?spm=1001.2101.3001.6650.1&utm_me ...

  8. Vue3.0 + Element Plus整合实战

    mall-vue3-manage 基于vue3.0 + Element Plus. 整合最新的 Echarts5 强劲的渲染引擎.富文本编辑器 Wangeditor 的后端管理项目. 版本 vue 3 ...

  9. P1077-DP【黄】

    昨天好几道题没做出来很郁闷,结果今天上来半小时不到就直接做出一道黄DP题了,不错,又有写题的冲动了. 这道题我一直被那个"因为方案数可能很多,请输出方案数对 1000007取模的结果.&qu ...

  10. CDC设计实例-01

    CDC设计实例 Clock Gating Cell & Glitch Free Clock Switch(门控单元和动态切换时钟) 一个电路有多个时钟输入进来,希望在工作当中能够动态切换时钟; ...