详解vue2.0 transition 多个元素嵌套使用过渡


Posted in Javascript onJune 19, 2017

在做vue的demo的时候遇到一个问题,多个嵌套的元素如何设置transition?

我的代码:

<div id='demo'>
    <button @click="show = !show">按钮</button>
    <transition name='move'>
      <div class="v-d" v-show="show">
        <div class='in in_move'></div>
      </div>
    </transition>
  </div>
//css
.v-d{
      width:50px;
      height:50px;
      padding:10px;
      transition: all 0.4s linear
    }
    .v-d .in{
      width:30px;
      height:30px;
      background:#000;
      transition: all 0.4s linear
    }
    .move-enter-active, .move-leave-active{
      transition: all 0.4s linear
    } 
    .move-enter, .move-leave-active{
      opacity: 0;
      transform: translateX(30px);
    } 
    .move-enter, .move-leave-active .in{
      transform: rotate(45deg)
    }
//js
window.onload = function(){
    new Vue({
     el: '#demo',
     data: {
      show: false
     }
    })
  }

运行代码后发现这个类名的过渡:

.move-enter, .move-leave-active .in{
  transform: rotate(180deg)
}

没起作用,我开始以为这种嵌套的写法不支持,但是后来经过多次尝试后发现,原来transition 应用的类名不能和基本样的类名一样,也就是.in这个类必须换名才能起作用,所以在改动下面代码:

<transition name='move'>
 <div class="v-d">
  <div class='in in_move'></div>
 </div>
</transition>

.move-enter, .move-leave-active .in_move{
  transform: rotate(180deg)
}

改完运行就ok了,实现了元素旋转和位移。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
javascript操作excel生成报表示例
May 08 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
Angular8 实现table表格表头固定效果
Jan 03 Javascript
vue中如何实现变量和字符串拼接
Jun 19 #Javascript
js实现随机数字字母验证码
Jun 19 #Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 #Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 #Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 #Javascript
AngularJS的ng-click传参的方法
Jun 19 #Javascript
JavaScript队列函数和异步执行详解
Jun 19 #Javascript
You might like
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
python实现桌面壁纸切换功能
2019/01/21 Python
Python 3 判断2个字典相同
2019/08/06 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
婚礼证婚人证婚词
2014/01/08 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript