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. The remote end hung up unexpectedly

    fatal: The remote end hung up unexpectedly 上传一份代码的时候,出现了这个错误,然后就没有成功上传. 背景操作 主要是进行svn转换到git时候出错的,转换的 ...

  2. ROS教程

    Learning ROS 学习ROS Depending on your learning style and preferences, you can take two approaches to ...

  3. 解决Error creating bean with name 'huayuanjingguanDaoimp' defined in file [D:\apache-tomcat-7.0.52\webapps\landscapings\WEB-INF\classes\com\itheima\landscaping\dao\imp\huayuanjingguanDaoimp.class]: Invo

    问题描述: 10:23:13,585 ERROR ContextLoader:307 - Context initialization failedorg.springframework.beans. ...

  4. CreateDialog()与CreateDialogIndrect()

    CreateDialog() 概述 函数功能:CreateDialog宏从一个对话框模板资源创建一个无模式的对话框,CreateDiaog宏使用CreateDialogParam函数. 函数原型:HW ...

  5. Scala包和引用

    1.包 Scala包的命名方式有两种.一种和Java一样,通过把package子句放在文件顶端的方式,把整个文件的内容放进包里.如: package scala.actors.Actor 另一种方式可 ...

  6. hdu 3664 Permutation Counting(水DP)

    Permutation Counting Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  7. JProfiler 简要使用说明

    1.简介 JProfiler是一个ALL-IN-ONE的JAVA剖析工具,可以方便地监控Java程序的CPU.内存使用状况,能够检查垃圾回收.分析性能瓶颈. 本说明文档基于JProfiler 9.2编 ...

  8. 别具光芒Div CSS 读书笔记（一）

    继承 边框(border).边界(margin).填充(padding).背景(background) 是不能继承的.   table 中td不会继承body的属性,因此需要单独指定.   权重   ...

  9. leetcode 最后一个单词的长度

    给定一个仅包含大小写字母和空格 ' ' 的字符串,返回其最后一个单词的长度. 如果不存在最后一个单词,请返回 0 . 说明:一个单词是指由字母组成,但不包含任何空格的字符串. 示例: 输入: &quo ...

  10. ionic4 ios调试打包

    在ionic3的时候打包上架过ios的版本,等到今天,差不多一年左右过去.做了个ionic4的app要测试打包的时候,才发现以前的东西忘的差不多了.不得不从头再来一遍,所幸的是这次看见了很多好的文章, ...