记录一下今天在vue的transition中遇到的坑

<!DOCTYPE html>

<html>

<head>

    <title>Vue中CSS动画原理</title>

    <script type="text/javascript" src="../vue.min.js"></script>

    <!-- 定义动画样式 -->

    <style type="text/css">

        .v-enter{

            opacity: 0;

        }

        .v-enter-active{

            transition: opacity 3s;

        }

    </style>

</head>

<body>

    <div id="root">

        <!-- 动画 -->

        <transition name="myfade">

        <!-- name属性的值作为fade-enter fade-enter-active等开头的名字 -->

            <div v-if="show">hello world</div>

        </transition>

        <button @click="change">切换</button>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el: "#root",

            data: {

                show: true

            },

            methods: {

                change: function () {

                    this.show = !this.show

                }

            }

        });

    </script>

</body>

</html>

被告知 transition 的 name 属性是可以自己随意设置的，于是给了 myfade，结果发现没有效果。

后来研究了下发现，这个 name 的值是用来替换 v-enter 的 v

于是修改成

　　<style type="text/css">

        .myfade-enter{

            opacity: 0;

        }

        .myfade-enter-active{

            transition: opacity 3s;

        }

    </style>

就OK了~

另注：transition 只有 name 这一个属性，且只有一个子元素，这个子元素需要 v-if 或 v-show 来控制是否显示。

vue的transition的name作用的更多相关文章

  1. vue项目的各个文件作用

    vue项目的各个文件作用: build:放置的是webpack配置文件,一般不动,修改了必须重启服务器才能生效 config:放置针对开发环境和线上环境的配置文件,一般不动 修改后需重启 node_m ...

  2. php开发面试题---vue面试题（vue.js的好处及作用）

    php开发面试题---vue面试题(vue.js的好处及作用) 一.总结 一句话总结: 双向数据绑定:在做ajax的时候,更新实在是太方便了 用数据绑定的思想,vue可以简单写单个页面,也可以写一个大 ...

  3. 在 vue 中用 transition 实现轮播效果

    概述 今天我接到一个需求:轮播效果.本来我是打算使用 Swiper 实现的,但是想起来貌似 transition 也能实现.于是就试了下,真的可以,还挺简单的,于是就记录下来,供以后开发时参考,相信对 ...

  4. vueX、vue中transition的使用、axios

    引入一篇好文章链接:看一遍就会的vuex文章;完!!! vue中transtion的使用:transition文章;完!!! axios的文章:axios;完!!!

  5. Vue中transition和animation的使用

    一:二者的对比 1.动画循环就用animation.在animation中有一个animation-iteration-count属性可以定义循环次数.transition是执行一次以后就不会执行,但 ...

  6. vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition

    自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...

  7. Vue中使用key的作用

    key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度 key具有唯一性 vue中循环需加 :key=“唯一标识” ,唯一标识可以使item里面id index 等,因为vue组 ...

  8. vue中 key 值的作用

    原文地址 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. vue和react的虚拟DOM ...

  9. vue的transition过渡效果

    需要4个类: *-enter: 进入的开始状态, *-enter-active: 进入的结束状态, *-leave: 离开的开始状态, *-leave-active: 离开的结束状态 vue-rout ...

随机推荐

  1. 应用安全 - 工具 - 中间件 - Apache - Apache Tika - 漏洞汇总

    CVE-2016-6809 Date2016 类型远程代码执行 影响范围Apache Tika 1.6-1.13 CVE-2018-1335 Date2018 类型命令注入 影响范围Tika-serv ...

  2. 关于Eclipse及JDK安装过程中的一些问题

    一,环境变量的配置 1.配置CLASSPATH系统变量 CLASSPATH系统变量为类查找路径 ①.在使用javac进行编译时遇到import时候就会通过这个变量里面配置的路径去查找.如果配置的是目录 ...

  3. jenkins pipline和jenkinsfile

    Jenkins Pipeline(或简称为 "Pipeline")是一套插件,将持续交付的实现和实施集成到 Jenkins 中. Jenkins Pipeline 提供了一套可扩展 ...

  4. [转帖].NET Core 项目指定SDK版本

    .NET Core 项目指定SDK版本 https://www.cnblogs.com/stulzq/p/9503121.html 一. 版本里的坑 自从 .NET Core 2.1.0版本发布以后, ...

  5. spark 运行报错：java.lang.AbstractMethodError

    报错日志如下: Caused by: java.lang.AbstractMethodError: sparkCore.JavaWordCount$2.call(Ljava/lang/Object;) ...

  6. Java Android 开发数字不足位数前面补0

    import java.text.DecimalFormat; public void changeColor(View view) { DecimalFormat decimalFormat = n ...

  7. 洛谷 P3919 可持久化线段树 题解

    题面 这题好水的说~很明显就是主席树的大板子 然而我交了3遍才调完所有的BUG,开好足够的数组,卡掉大大的常数: 针对与每次操作,change()会创建新节点,而ask()虽然也会更新左右儿子的节点编 ...

  8. phpstorm配合xdebug进行本地调试代码

    笔者在使用的环境是wamp3.1.6和phpstorm2018 ,php选择的环境是php7.2 1. 在php.ini中添加xdebug的配置信息 首先建议是先找对php.ini的位置,可以在php ...

  9. java.lang.IllegalArgumentException: id to load is required for loading

    java.lang.IllegalArgumentException: id to load is required for loading at org.hibernate.event.LoadEv ...

  10. 如何使用前端分页框架bootstrap paginator

    前端分页框架bootstrap paginator用于web前端页面快速实现美观大方的翻页功能.在实现交互良好的页面翻页功能时,往往还需要配合使用后端分页框架pagehelper.pagehelper ...