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

1.效果演示

2.相关代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../js/vue-2.4.0.js"></script>

    <!--2.自定义两种样式 控制transition实现内部动画-->

    <style>

        /*[这是一个时间点]v-enter是进入前元素的起始状态 还没开始进入*/

        /*[这也是一个时间点]v-leave-to是动画离开之后的终止状态,此时元素动画已经结束了*/

        .v-enter,

        .v-leave-to{

            opacity: 0;

            transform: translateX(80px);

        }

        /*v-enter-active [入场动画的时间段]*/

        /*v-leave-active [离场动画的时间段]*/

        .v-enter-active,

        .v-leave-active{

            transition: all 0.4s ease;

        }

    </style>

</head>

<body>

<div id="app">

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

    <!--//点击h3显示 再点击隐藏-->

    <!--1.使用transition 元素 吧需要被动画控制的元素包裹起来-->

    <transition>

        <h3 v-if="flage">这是一个h3</h3>

    </transition>

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            flage: false

        },

        methods: {}

    })

</script>

</body>

</html>

自定义前缀.my-enter-active

1.效果演示:

2.相关代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../js/vue-2.4.0.js"></script>

    <script src="../js/vue-resource-1.3.4.js"></script>

    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <!--2.自定义两种样式 控制transition实现内部动画-->

    <style>

        /*[这是一个时间点]v-enter是进入前元素的起始状态 还没开始进入*/

        /*[这也是一个时间点]v-leave-to是动画离开之后的终止状态,此时元素动画已经结束了*/

        .v-enter,

        .v-leave-to{

            opacity: 0;

            transform: translateX(80px);

        }

        /*v-enter-active [入场动画的时间段]*/

        /*v-leave-active [离场动画的时间段]*/

        .v-enter-active,

        .v-leave-active{

            transition: all 0.4s 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="flage=!flage">

    <!--//点击h3显示 再点击隐藏-->

    <!--1.使用transition 元素 吧需要被动画控制的元素包裹起来-->

    <transition>

        <h3 v-if="flage">这是一个H3</h3>

    </transition>

<hr>

    <input type="button" value="toggle2" @click="flage2=!flage2">

    <!--//点击h3显示 再点击隐藏-->

    <!--1.使用transition 元素 吧需要被动画控制的元素包裹起来-->

    <transition name="my">

        <h6 v-if="flage2">这是一个H6</h6>

    </transition>

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            flage: false,

            flage2: false

        },

        methods: {}

    })

</script>

</body>

</html>

Vue使用过渡类名实现动画和自定义前缀的更多相关文章

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

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

  2. Vue学习笔记【18】——Vue中的动画（使用过渡类名）

    为什么要有动画:动画能够提高用户的体验,帮助用户更好的理解页面中的功能: 使用过渡类名 步骤分析  需求: 点击按钮,让 h3 显示,再点击,让 h3 隐藏  1. 使用 transition 元素, ...

  3. Vue相关(过渡动画)

    Vue 过渡 && 动画 一.CSS过渡 1.transition标签可以用来封装需要过渡的元素,添加entering/leaving 过渡, 条件是: (1)使用条件渲染语句 v-i ...

  4. VUE：过渡&动画

    VUE:过渡&动画 vue动画的理解 1)操作css的 trasition 或 animation 2)vue会给目标元素添加/移除特定的class 3)过渡的相关类名 xxx-enter-a ...

  5. Vue列表过渡

    前面的话 本文将详细介绍Vue列表过渡 概述 前面分别介绍了单元素CSS过渡和JS过渡,以及多元素过渡.如何同时渲染整个列表呢?在这种情景中,需要使用<transition-group>组 ...

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

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

  7. vue 路由过渡动效

    <router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果: <transition name="slid ...

  8. vue用js部分控制动画实现

    上次我们提到用vue实现过渡动画,其实只讲了vue动画的一部分,用vue自带的css状态控制动画实现,不带js http://www.cnblogs.com/null11/p/7081506.html ...

  9. vue移动端转场动画

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

随机推荐

  1. 多线程中使用curl致coredump问题

    coredump时的调用栈: #0  0x081eff2c in addbyter () #1  0x081f05b8 in dprintf_formatf () #2  0x081f15cf in ...

  2. 【Win10】实现 ListViewBase 平滑滚动

    首先解释下标题的 ListViewBase 是什么鬼.ListViewBase 我们可以查阅 MSDN 文档:https://msdn.microsoft.com/zh-cn/library/wind ...

  3. Keil5编译STM32注意事项

    硬件:某STM32开发板,ST-Link/V2 一.硬件相关: 1.引脚连接: pin7 <-> SWIO pin9 <-> SWCLK pin20/pin18 <-&g ...

  4. javascript快速排序的思考

    还记得三个月前,学习过快速排序,示例所讲的python快速排序十分易于理解,然而网上学习的c#的快速排序当时就懵逼的,现在已经全忘了,大概记得个思路 在学习完了一些高级的js方法后,今天用js模拟了p ...

  5. OpenLayers在地图上显示统计图，饼图线状图柱状图，修复统计图跳动的问题

    环境介绍 Openlayers ol.js v5.3.0 Highcharts highcharts.js v7.0.1 jquery jquery-3.3.1.js v3.3.1 显示效果 地图放大 ...

  6. 基于MVC框架Aspose.Words打印到Word中写法

    控件bin文件下载地址:https://download.csdn.net/download/u012949335/10610726 //前端打印写法 @{ ViewBag.Title = " ...

  7. Oracle数据库设置Scott登录

    Oracle数据库Scott登录 在安装数据库时,用户登录选项中,Scott用户默认是未解锁的. 用户名填写as sysdba:密码是原来设置的,登录进去,新建SQL窗口,输入命令: alert us ...

  8. poj1125

    题目大意:哎,意思看了半天,看了别人的解释才明白,就是说从一个经纪人出发传递消息,直到所有人都收到消息 也就是说只要找到该经纪人到其它所有点的最短距离中的最大一个时间,就说明最后一个也收到消息了. 而 ...

  9. Retrofit源码解析（上）

    简介Retrofit是Square公司开发的一款针对Android网络请求的框架,官网地址http://square.github.io/retrofit/ ,在官网上有这样的一句话介绍retrofi ...

  10. Lucence工作原理

    lucence 是一个高性能的java全文检索工具包,他使用倒排序文件索引结构,改结构和相应的生成算法如下: 一.设有两篇文章1和2      文章1的内容为:Tom lives in guangzh ...