精华内容
下载资源
问答
  • 最近公司一个项目需要用到开源ui,有些使用场景跟之前不太一样,发现了一些小坑,后续发现会一一记录 1:transition 过渡效果 过渡效果相信前端开发都是无法避免的,在使用el-collapse-transition展开折叠效果的时候...

    记录背景:

    最近公司一个项目需要用到开源ui,再次使用element-ui,有些场景和之前不太一样,发现了一些小坑,后续发现会一一记录

    1:transition 过渡效果

    过渡效果相信前端开发都是无法避免的,在使用el-collapse-transition展开折叠效果的时候发现这个效果只过渡内部盒子的实际高度,如果盒子排版的时候带的有margin/padding之类的样式,会导致下面的内容在过渡完盒子本身高度后产生页面跳动的问题。即使给盒子设置固定高度再加padding也不行

    解决方案:给使用过渡效果的盒子加div::before、div::after撑起盒子高度代替margin/padding,使过渡达到理想效果

    展开全文
  • Vue公司的动画并没有非常炫酷的效果,不过也是有一些实用性的,在项目中有的地方使用,也是能够营造出不同的效果 下面为大家列举两个简单实现动画的例子 使用 <transition> 包裹 ...

    Vue的动画并没有非常炫酷的效果,不过也是有一些实用性的,在项目中有的地方使用,也是能够营造出不同的效果

    下面为大家列举两个简单实现动画的例子

    使用 <transition> 包裹

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
    
        <script rel="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(150px);
            }
             /*入场(离场)动画的时间段   */
            .v-enter-active,.v-leave-active{
                transition: all 0.8s 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="flag=!flag">
            <input type="button" value="toggle2" @click="flag2=!flag2">
    
            <!--1. 使用transition元素把需要被动画控制的元素,包裹起来-->
            <transition>
                <h3 v-if="flag">这是一个H3</h3>
            </transition>
    
            <transition  name="my">  <!--区分不同组织间动画-->
                <h6 v-if="flag2">这是一个H6</h6>
            </transition>
        </div>
    
    <script>
        var vm = new Vue({
           el : '#app',
           data : {
               flag : false,
               flag2 : false,
           },
           methods : {
    
           },
        });
    
    </script>
    </body>
    </html>

    使用 <transition-group> 包裹

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <script rel="script" src="js/vue-2.4.0.js"></script>
    
        <link rel="stylesheet" href="css/animate.css">
    
        <style>
            li{
                border: 1px dashed #999;
                margin: 5px;
                line-height: 35px;
                font-size: 14px;
                padding-left: 5px;
                width: 100%;
            }
    
            li:hover{
                background-color: hotpink;
                transition: all 0.5s ease;
            }
            .v-enter,.v-leave-to{
                opacity: 0;
                transform: translateY(80px);
            }
    
            .v-enter-active,.v-leave-active{
                transition: all 0.6s ease;
            }
    
            /*v-move 和 v-leave-active 配合使用,能够实现列表后续的元素,渐渐地漂上来的效果 */
    
            .v-move{
                transition: all 0.6s ease;
            }
            .v-leave-active{
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div>
                <label>
                    ID:
                    <input type="text" v-model="id">
                </label>
                <label>
                    Name:
                    <input type="text" v-model="name">
                </label>
    
                <input type="button" value="添加" @click="add">
            </div>
    
    
    
           <ul>
               <!--在实现列表过渡时,如果需要过渡的元素是通过v-for渲染出来的,不能使用
               transition 包裹,需要使用 transition-group -->
    
               <!--若需要为 v-for 循环创建的元素设置动画,必须为每一个元素设置 :key 属性-->
               <transition-group>
                   <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
                       {{ item.id }} --- {{ item.name }}
                   </li>
               </transition-group>
           </ul>
        </div>
    
    
        <script>
            var vm = new Vue({
                el : '#app',
                data : {
                    id:'',
                    name :'',
                    list : [
                        {id:1,name:'赵高'},
                        {id:2,name:'秦桧'},
                        {id:3,name:'严嵩'},
                        {id:4,name:'魏忠贤'},
                    ],
                },
                methods : {
                    add(){
                        this.list.push({ id :this.id,name : this.name});
                        this.id = this.name = '';
                    },
                    del(i){
                        this.list.splice(i,1);
                    },
                }
            });
         </script>
    </body>
    </html>

    使用 第三方类实现动画

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script rel="script" src="js/vue-2.4.0.js"></script>
    
        <link rel="stylesheet" href="css/animate.css">
    
        <!--入场 bounceIn   离场 ounceOut-->
    </head>
    <body>b
        <div id="app">
            <input type="button" value="toggle" @click="flag=!flag">
    
            <!--<transition enter-active-class="animated bounceIn"
                       leave-active-class="animated bounceOut">
                <h3 v-if="flag">坏蛋,坏蛋,大坏蛋~~~</h3>
            </transition>-->
    
            <!--<transition enter-active-class="bounceIn"
                        leave-active-class="bounceOut" :duration="200">
                //:duration="毫秒值" 统一设置入场和离场时间为 400ms          
                   <h3 v-if="flag" class="animated">坏蛋,坏蛋,大坏蛋~~~</h3>
            </transition>-->
    
            <transition enter-active-class="bounceIn"
                        leave-active-class="bounceOut"
                        :duration="{ enter: 200, leave: 2000 }"><!--分别设置时间-->
    
                <h3 v-if="flag" class="animated">坏蛋,坏蛋,大坏蛋~~~</h3>
            </transition>
        </div>
    
    
    
    
        <script>
            var vm = new Vue({
                el : '#app',
                data : {
                    flag : false,
                },
                methods : {
    
                },
            });
    
        </script>
    
    </body>
    </html>

    不过这样使用的话,会有一些瑕疵,运行检查代码

    这里写图片描述

    大家可以看到 ul>span标签里 放的是块级 li元素 ,这是不符合标准的,所以应修改代码如下:

              <!-- 【appear】 给 transition-group 添加入场效果-->
              <!--
                通过 tag 属性,指定transition-group 渲染 为指定的元素
                若不指定,则默认为渲染为 span 标签
               -->
               <transition-group appear tag="ul">
                   <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
                       {{ item.id }} --- {{ item.name }}
                   </li>
               </transition-group>

    代码运行如下:

    这里写图片描述

    这样就OK啦~~

    展开全文
  • 最近公司的项目选型使用了vue,所以用vue开发了一个项目,期间在处理一些动画的时候,发现vue-transition虽然用起来简单,但是局限性很大,比如无法处理一个组件中父子元素的联动动画。这就极大得限制了我们的发挥,...
        

    最近公司的项目选型使用了vue,所以用vue开发了一个项目,期间在处理一些动画的时候,发现vue-transition虽然用起来简单,但是局限性很大,比如无法处理一个组件中父子元素的联动动画。这就极大得限制了我们的发挥,你只能进行单层次的动画,类似modal这种两种动画联动的就很难做,你很可能需要分成两个组件来做,这就不符合组件化的原则。

    所以打算研读一下源码,然后研究一下如何解决这个问题。

    既然是看transition,那么首先就得狙击transition指令,然后transition指令代码如此简单:

    // (/src/directives/internal/transition.js)
    
    export default {
    
      priority: TRANSITION,
    
      update (id, oldId) {
        var el = this.el
        // resolve on owner vm
        var hooks = resolveAsset(this.vm.$options, 'transitions', id)
        id = id || 'v'
        // apply on closest vm
        el.__v_trans = new Transition(el, id, hooks, this.el.__vue__ || this.vm)
        if (oldId) {
          removeClass(el, oldId + '-transition')
        }
        addClass(el, id + '-transition')
      }
    }

    在这里我们指令在el上加上了一个__v_trans属性,这个属性是一个Transition的实例,所以我们去看看这个实例干了什么

    // (/src/transition/transition.js)
    
    export default function Transition (el, id, hooks, vm) {
        ...
    }
    

    这就是一个保存这个过渡动画应该包含的一些属性和钩子,我们还是不知道什么时候通过什么方法调用了动画

    这时候我回头去看了vue的文档,在transition的介绍里有这么一句:

    transition 特性可以与下面资源一起用:

    v-if
    v-show
    v-for (只为插入和删除触发)
    动态组件 (介绍见组件)
    在组件的根节点上,并且被 Vue 实例 DOM 方法(如 vm.$appendTo(el))触发。

    这时候我就怀疑只有特定的场景才能触发transition,而触发的关键就在这些指令里面,于是我就去看v-if指令,然后在他插入节点的时候发现了这一句代码:

    this.frag = this.factory.create(this._host, this._scope, this._frag)
    this.frag.before(this.anchor)

    这个factory是什么?,接着找

    this.elseFactory = new FragmentFactory(this.vm, next)

    他是一个FragmentFactory,在这个FragmentFactory里面我看到了这一个方法:

    function singleBefore (target, withTransition) {
      this.inserted = true
      var method = withTransition !== false
        ? beforeWithTransition
        : before
      method(this.node, target, this.vm)
      if (inDoc(this.node)) {
        this.callHook(attach)
      }
    }

    貌似看到了一些曙光,我们终于看到跟transition有关的东西,这里我们继续找到beforeWithTransition这个方法,代码如下:

    export function beforeWithTransition (el, target, vm, cb) {
      applyTransition(el, 1, function () {
        before(el, target)
      }, vm, cb)
    }

    这里调用了applyTransition,代码如下:

    export function applyTransition (el, direction, op, vm, cb) {
      var transition = el.__v_trans
      if (
        !transition ||
        // skip if there are no js hooks and CSS transition is
        // not supported
        (!transition.hooks && !transitionEndEvent) ||
        // skip transitions for initial compile
        !vm._isCompiled ||
        // if the vm is being manipulated by a parent directive
        // during the parent's compilation phase, skip the
        // animation.
        (vm.$parent && !vm.$parent._isCompiled)
      ) {
        op()
        if (cb) cb()
        return
      }
      var action = direction > 0 ? 'enter' : 'leave'
      transition[action](op, cb)
    }

    在这里我们终于看到了el.__v_trans这个属性,那么这个回路基本就算走完了。

    然后我去看了一下v-show指令,于是发现,还有更简单的方法。。。

    apply (el, value) {
        if (inDoc(el)) {
          applyTransition(el, value ? 1 : -1, toggle, this.vm)
        } else {
          toggle()
        }
        function toggle () {
          el.style.display = value ? '' : 'none'
        }
    }

    直接applyTransition就可以调用了

    现在我们知道为什么v-transition是只能单点的了,因为本质上他只能作用于特定指令所影响的特定元素,他的实现方式并不是类似于react的TransitionGroup这样通过给子组件增加生命周期在通过子组件在生命周期自定义动画的方式,vue的局限性表露无遗,让我觉得很奇怪作者为什么选择这种方式,难道真的只是为了降低使用难度?

    问题提出来了,就得想办法了

    我得想想。。。

    展开全文
  • vue过渡动画transition标签+animate.css

    千次阅读 2019-08-24 11:25:53
    最近在优化公司官网时遇到的问题,在此记录一下,以免忘记。 transition标签介绍 进入/离开的6个class切换 v-enter:定义进入过度的开始状态。在元素被插入之前生效,在元素被插入后的下一帧移除。 v-enter-active...

    最近在优化公司官网时遇到的问题,在此记录一下,以免忘记。

    transition标签介绍

    进入/离开的6个class切换

    1. v-enter:定义进入过度的开始状态。在元素被插入之前生效,在元素被插入后的下一帧移除。
    2. v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
    3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
    4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
    5. v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
    6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。

    mode过度模式
    in-out:新元素先进行过渡,完成之后当前元素过渡离开。

    out-in:当前元素先进行过渡,完成之后新元素过渡进入。

    animate.css

    安装animate.css

    cnpm install animate.css -save
    

    调用animate.css
    main.js

    import 'animate.css
    

    如何将animate和transition结合起来

    <transition name="fade" mode="out-in"  enter-active-class="animated tada delay-2" leave-active-class="animated bounceOutRight" appear>
    				<router-view/>
    	</transition>
    

    如果是动态组件切换,只需要包裹router-view占位符,如果transition标签包裹在组件上,则会发生要离开的组件在执行离开动画的同时,即将进入的组件同时执行进入动画。这样就会导致同一个位置同时出现两个组件,导致布局错乱。

    这里只是介绍一种常用的transition结合animate的用法,更多详细请访问vue官网教程

    展开全文
  • 近日,据媒体报道,吉利旗下的Terrafugia飞行汽车公司宣布,其生产的Transition飞行汽车将于今年10月份开启预定,并于19年开始正式上市! 据悉,Transition飞行汽车拥有混合动力发动机,更强的推进系统,全新升级...
  • 近日,据媒体报道,吉利旗下的Terrafugia飞行汽车公司宣布,其生产的Transition飞行汽车将于今年10月份开启预定,并于19年开始正式上市! 据悉,Transition飞行汽车拥有混合动力发动机,更强的推进系统,全新升级...
  • 最近在做公司项目时,涉及到做一个问卷调查,需要在不同题目题目之间使用transition产生一个过渡效果:当点击按钮进入下一题时,当前卡片从正中间向左滑动至不可见后,下一题对应的卡片从右边不可见区域从右向左滑动...
  • 之前FilmImpact 推出的三套PR转场 FilmImpact Transition Pack 受到很多人的喜欢和使用; 现在公司又推出了第五套Pr插件FilmImpact Motion Tween(运动切换), 且现在所有插件已经更新到最版本,提升了插件的性能...
  • HTML5和css3已经是将来的发展趋势,现在有很多移动端还有一些游戏公司已然...去年年底的时候公司有个页面的浮层图标需要优化,就是鼠标划过能变大,划出复原。其实 要做这个功能很简单,也有很多的方法。但是,我...
  • css3动画这个对于我们前端攻城狮来说是个既熟悉又陌生的东东,前两年有好些个大牛都在研究使用它,但最近一段热度降了下来,可以说这个东东各大钟情于大的公司都有自己的一套解决使用方案,但我在网上苦苦的寻找,...
  • 最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了。 索性在这里进行一个简单的对比,加深自己的记忆。 浏览器兼容性 CSS3 transform 属性 Internet ...
  • 公司的项目中,有一个列表页切换的需求 需求: 进来,默认展示列表一,点击button2,列表一向左移出屏幕外,然后列表二向左移动,占据屏幕。 点击button1,则相反。 <div> <button class="button...
  • 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能...
  • 最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了。 索性在这里进行一个简单的对比,加深自己的记忆。 浏览器兼容性 CSS3 transform 属性 Internet Explorer 10、Firefox、Opera 支持...
  • 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多 程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师...
  • 公司以后每天都很忙很久没打理博客了,希望接下来能够整理一下之前学习到的知识。 先简单回顾下css3一些新的特性吧,以chrome为例 渐变色 gradient 线性渐变语法:background:-webkit-linear-gradient(left,#...
  • 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称...
  • 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称...
  • 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能...
  • 在过去的一年很多人不满于公司没有福利、人际关系不好相处、没有发展前途的境遇等等,想着在开年来换一份工作来重新开始自己,那么 你 准备好了吗? 下面是本人整理的一份面试材料,本想自己用的,但是新年第一天 ...
  • Agile的公司主页总算还是在近两天紧张的时间里做完了。  因为添加了Transition等特效所以实际的操作效果是比较有趣的。新闻查询是按照新闻的发布时间来进行查询的。  可以说这个项目让我收获了很多,很多模块,...
  • Enterprises and large companies like Facebook have had AI-first capability for years, but it’s only recently that small businesses could make the transition. Yuval Greenfield of missinglink.ai has ...
  • pc端样式重置 *{ margin:0; padding:0;} body{ font-size:14px; font-family:微软雅黑;font-style:normal;...a,a:hover{ transition:background 0.5s linear;-webkit-transition:background ...

空空如也

空空如也

1 2 3 4 5
收藏数 91
精华内容 36
关键字:

transition公司