精华内容
下载资源
问答
  • 今天小编就为大家分享一篇vue transition 在子组件中失效的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 总所周知,vue中的transition标签可以方便得进行动画过渡,使用的方法也很简单。 <transition name=你要的名字> 过渡的元素... </transition> 这里需要主要一点的是:过渡的元素只能是以下之一: 条件渲染 (使用...
  • vue的过渡动画,主要是transition标签的使用,配合css动画实现的。接下来通过本文给大家分享Vue运用transition实现过渡动画效果,感兴趣的朋友一起看看吧
  • vue3 transition

    2021-03-20 22:48:29
    transition transition-group Defination(for all) Describing how * an element * transfer from invisible to present. Distinction Component transition only with a displaying element inside .Means that you...

    Defination

    Component
    transition
    transition-group
    Defination(for all)
    Describing how * an element * transfer from invisible to present.
    Distinction
    Component transition only with a displaying element inside .Means that you can use v-if/v-show
    Component transition-group with elememt s inside that genderated by v-for and reuse the same set of transition rule. All are individual.

    Usage

    • named class : v-enter-active ,etc
    • attributes refer to particular css,which have higher prority than named class, for integer 3-rd css libraries.(Its effect would cover named class)
    • hooks :@before-enter ,@enter ,@after-ener,@enter-cancelled.

    Attributes

    1. type=‘transition/animation’ 。if your element has css animation triggered by vue along with css transition trigger by hover ,you can tell vue @transitionend or @animationend which you want to use by this attribute
    2. mode=‘in-out / out-in’ .this used when swith 2 element in transition tag.New element comeout first or previous element disappear first?
    3. : key =‘xx’
    4. :is =‘component name’ dynamic component
    5. :css = ‘fasle’ * unknown *
    6. v-move = ‘xxx’ *use it when you use transition-group,it describes how elements relative to each other transform their position *
    7. tag =‘whatever’ *what is the transition-group tag rendered as *


    有几个属性不懂

    1. :css=false
    2. type=‘animation/transition’
    type

    过度组件起作用的流程:

    1. 检测element用了 css的Transition还是Animation。根据检测结果,在合适的时机 +/- 合适的类名(v-enter-active ,etc)
    2. 如果 有@before-enter , @after-enter 等钩子,会在适宜时间点上调用
    3. 如果vue既没有检测到 Transition/Animation ,有没有检测到上一步提及的钩子。则element立马出现或者小时,没有过度效果。

    那么,type?

    条件:当mode=‘out-in’
    4. 菜鸡怕看源码,简单测试了下。发现,type的值会告诉vue,element会使用transitoin还是animation来表现过度。
    5. 如果element使用了animation,但是type的值是transition的话,vue会找不到过度,直接就没有过度效果***(??hook?)***
    6. 如果element身上有应用Animation(花费3秒)作为过度,也有应用transition(花费6秒)在hover时生效,而type是transiton的话,过度的时候仍然是animation,只是一个动画开始后6s,才会执行这个过度的@after-leave,才会播放下一个过度(比方说新元素出现时的过度)

    也就是说,vue找到type值指向的过度,没有就没有,就就拿秒数,然后根据时间拍好动画队列,以安排每个过度效果的开始显示时机 和 钩子的执行时机。
    但是具体每个效果怎么显示,显示的时间,css中已安排好了。
    所以type值是根据检测时间来安排 各个过度效果的 次序,各个过渡效果自定义……

    栗子 ↓

    <template>
        <button @click="convert">switch</button>
        <transition 
            name='trigger' 
            mode="out-in" 
            type="animation"
            @before-leave='log("before leave")'
            @leave='log("leaving")'
            @after-leave='log("after leave")'
    
            @before-enter='log("before enter")'
            @enter='log("entering")'
            @after-enter='log("after enter")'
            >
            <div class="trigger"  :key="text">
                {{computedText}}
            </div>
        </transition>
    </template>
    <script lang="ts">
    import {Vue } from 'vue-class-component';
    
    let key: number;
    export default class App extends Vue{
        text = 1;
    
        convert(){
            this.text =+(!Boolean(this.text))
    
            clearInterval(key);
            key=setInterval(function(){
                console.log('1');
            },1000);
            setTimeout(() => {
                clearInterval(key)
            }, 7000);
        }
        log(mes: string){
            console.log(mes)
        }
        get computedText(){
            return (this.text+'').repeat(3)
        }
    }
    </script>
    <style lang='scss'>
        .trigger{
            /* 
                1.transition 上的type值,会在该元素身上找对应transition/animation 的秒数。
                2.如果找不到type值对应的秒数,会立马变化而没有过度效果。
                3.找到的话,
                4.实际生效的每个过度时间(单指enter / leave 的时间花费)为3.找到的秒数。
                -----
                此属性写在.trigger:hover上的话,
                会变成 上面 2.  的结果
                ------
                综上所述,vue通过type属性,在将要产生过度的.trigger 元素上找所要的,.trigger:hover 就是另一个元素了
             */
             animation-duration: 6s;
            &:hover{
                animation-name: colour;
                animation-fill-mode: forwards;
                // animation-duration: 6s; 
            }
        }
        .trigger-leave-active,.trigger-enter-active{
            transition:all 1s ;
        }
        .trigger-enter-from,.trigger-leave-to{
            opacity:0;
        }
        .trigger-leave-from,.trigger-enter-to{
            opacity:1;
        } 
        @keyframes colour {
            from {
                color:black;
            }
            to{
                color: red;
            }
        }
    </style>  
    
    展开全文
  • 主要介绍了vue页面切换过渡transition效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了详解vue2.0 transition 多个元素嵌套使用过渡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue transition 过渡动画

    千次阅读 2019-03-21 14:40:32
    vue在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括: 1. 在 CSS 过渡和动画中自动应用 class 2. 可以配合使用第三方 CSS 动画库,如 Animate.css 3. 在过渡钩子函数中使用 JavaScript 直接...

    vue在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括:
        1. 在 CSS 过渡和动画中自动应用 class
        2. 可以配合使用第三方 CSS 动画库,如 Animate.css
        3. 在过渡钩子函数中使用 JavaScript 直接操作 DOM
        4. 可以配合使用第三方 JavaScript 动画库,如 Velocity.js

    当以下情形下会触发过度效果:
        条件渲染 (使用 v-if)
        条件展示 (使用 v-show)
        动态组件
        组件根节点

    当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理:
        自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名。
        如果过渡组件提供了 JavaScript 钩子函数,这些钩子函数将在恰当的时机被调用。
        如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画,
        DOM 操作 (插入/删除) 在下一帧中立即执行。(注意:此指浏览器逐帧动画机制,和 Vue 的 nextTick 概念不同)

    CSS过渡实例:
    	<template>
    		<div>
    			<button @click="show = !show">click</button><br/>
    			<!--注意此处的属性名为name-->
    			<transition name="fade">
    				<p v-if="show">hello world</p>
    			</transition>
    		</div>
    	</template>
    	<script>
    	export default {
    		data () {
    			return {
    				show: true
    			}
    		}
    	}
    	</script>
    	<style lang="less" scoped>
    	.fade-enter-active, .fade-leave-active {
    		transition: opacity 1.5s;
    	}
    	.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    		opacity: 0;
    	}
    	</style>

    过渡的类名
    在进入/离开的过渡中,会有 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 被删除),在过渡/动画完成之后移除。

        说明:
            opacity 0  =>  1
            v-enter => v-enter-active => v-enter-to
            opacity 1  =>  0
            v-leave => v-leave-active => v-leave-to
            
            使用一个没有名字的 <transition>,则 v- 是这些类名的默认前缀。
            如果使用了 <transition name="my-transition">,那么 v-enter 会替换为 my-transition-enter。
            v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线

    CSS 动画实例:
    	<template>
    		<div>
    			<button @click="show = !show">click</button><br/>
    			<transition name="bounce">
    				<p v-if="show">hello world</p>
    			</transition>
    		</div>
    	</template>
    	<script>
    	export default {
    		data () {
    			return {
    				show: true
    			}
    		}
    	}
    	</script>
    	<style lang="less" scoped>
    	.bounce-enter-active {
    		animation: bounce-in .5s;
    	}
    	.bounce-leave-active {
    		animation: bounce-in .5s reverse;
    	}
    	@keyframes bounce-in {
    		0% {
    			transform: scale(0);
    		}
    		50% {
    			transform: scale(1.5);
    		}
    		100% {
    			transform: scale(1);
    		}
    	}
    	</style>
    	

    自定义过渡的类名
        可以配合第三方库进行使用
        可以通过以下特性来自定义过渡类名:
            1. enter-class
            2. enter-active-class
            3. enter-to-class (2.1.8+)
            4. leave-class
            5. leave-active-class
            6. leave-to-class (2.1.8+)

        自定义过度类名优先级高于普通的类名,这对于 Vue 的过渡系统和其他第三方 CSS 动画库,如 Animate.css 结合使用十分有用。

    第三方CSS动画库实例:
    	<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    	<template>
    		<div>
    			<button @click="show = !show">click</button><br/>
    			<transition 
    				name="custom-classes-transition"
    				enter-active-class="animated tada"
    				leave-active-class="animated bounceOutRight">
    				<p v-if="show">hello world</p>
    			</transition>
    		</div>
    	</template>
    	<script>
    	export default {
    		data () {
    			return {
    				show: true
    			}
    		}
    	}
    	</script>
    	<style lang="less" scoped>
    	</style>

    可以使用<transition>的 type 特性并设置 animation 或 transition 来明确声明需要 Vue 监听的类型。
    可以用<transition>组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计):
        1. <transition :duration="1000">...</transition>
        2. <transition :duration="{ enter: 500, leave: 800 }">...</transition>
        
    JavaScript 钩子
        可以在属性中声明 JavaScript 钩子
        可监听的几个状态:
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:after-enter="afterEnter"
            v-on:enter-cancelled="enterCancelled"

            v-on:before-leave="beforeLeave"
            v-on:leave="leave"
            v-on:after-leave="afterLeave"
            v-on:leave-cancelled="leaveCancelled"

    展开全文
  • vuetransition标签如何使用

    千次阅读 2020-10-10 09:54:57
    vuetransition标签如何使用 概述 Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡...

    vue中transition标签如何使用

    概述

    Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:

    • 在 CSS 过渡和动画中自动应用 class
    • 可以配合使用第三方 CSS 动画库,如 Animate.css
    • 在过渡钩子函数中使用 JavaScript 直接操作 DOM
    • 可以配合使用第三方 JavaScript 动画库,如 Velocity.js

    transition标签使用

    Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡

    • 条件渲染 (使用 v-if)
    • 条件展示 (使用 v-show)
    • 动态组件
    • 组件根节点
      这里是一个典型的例子:
      HTML部分:
    <div id="demo">
      <button v-on:click="show = !show">
        Toggle
      </button>
      <transition name="fade">
        <p v-if="show">hello</p>
      </transition>
    </div>
    

    JS部分:

    new Vue({
      el: '#demo',
      data: {
        show: true
      }
    })
    

    CSS部分:

    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0;
    }
    
    当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理:
    1. 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名。
    2. 如果过渡组件提供了 JavaScript 钩子函数,这些钩子函数将在恰当的时机被调用。
    3. 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画,DOM 操作 (插入/删除) 在下一帧中立即执行。(注意:此指浏览器逐帧动画机制,和 Vue 的 nextTick 概念不同)

    过渡的类名

    在进入/离开的过渡中,会有 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 被删除),在过渡/动画完成之后移除。
      在这里插入图片描述

    对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 ,则 v- 是这些类名的默认前缀。如果你使用了 ,那么 v-enter 会替换为 my-transition-enter。

    v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线。

    CSS 过渡

    常用的过渡都是使用 CSS 过渡。
    下面是一个简单例子:
    HTML部分:

    <div id="example-1">
      <button @click="show = !show">
        Toggle render
      </button>
      <transition name="slide-fade">
        <p v-if="show">hello</p>
      </transition>
    </div>
    

    JS部分:

    new Vue({
      el: '#example-1',
      data: {
        show: true
      }
    })
    

    CSS部分:

    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
      transition: all .3s ease;
    }
    .slide-fade-leave-active {
      transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
      transform: translateX(10px);
      opacity: 0;
    }
    

    过渡模式有一个问题:一个离开过渡的时候另一个开始进入过渡。这是 的默认行为 - 进入和离开同时发生,因为这样也导致了两个卡片的过渡不太复合需求,我们需要的是一个先离开后另一个再进入。

    同时生效的进入和离开的过渡不能满足所有要求,所以 Vue 提供了 过渡模式
    in-out:新元素先进行过渡,完成之后当前元素过渡离开。
    out-in:当前元素先进行过渡,完成之后新元素过渡进入。

    <transition name="fade-transform" mode="out-in">
          <keep-alive v-if="isRouterAlive && $route.meta.keepAlive">
            <router-view/>
          </keep-alive>
          <router-view v-if="isRouterAlive && !$route.meta.keepAlive" />
        </transition>
    

    因此我们需要在transition标签中添加mode来达成效果:
    希望此篇文章对你有帮助,详细内容可以查看官方文档.

    展开全文
  • vue transition无效

    千次阅读 2020-03-12 15:06:32
    vue transition无效 模仿iview drawer过程中,使用vuetransition组件,发现当transition的样式写在,transition .dashboard样式上面时,transition动画无效 <transition name="drawer"> <div class=...

    vue transition无效

    模仿iview drawer过程中,使用vue的transition组件,发现当transition的样式写在,transition .dashboard样式上面时,transition动画无效

        <transition name="drawer">
          <div class="dashboard" v-show="dashboardShow"></div
        ></transition>
    
    //   写在上面无效
    //   .drawer-enter-active,
    //   .drawer-leave-active {
    //     transition: all 1s ease-out;
    //   }
    //   .drawer-enter, .drawer-leave-to /* .fade-leave-active below version 2.1.8 */ {
    //     width: 0;
    //   }
     .dashboard {
        width: 180px;
        height: 100%;
        background: chocolate;
        // transition: all 2s ease-out;
      }
      // 要写在 里面内容的下面
      .drawer-enter-active,
      .drawer-leave-active {
        transition: all 1s ease-out;
      }
      .drawer-enter, .drawer-leave-to /* .fade-leave-active below version 2.1.8 */ {
        width: 0;
      }
    
    展开全文
  • vue transition淡入淡出

    2021-09-22 10:09:38
    主要是transition的name属性和css的首个单词要一致。 html: <div class="answer_mask"> <div class="mask_byx"> <transition name="fade" v-for="(item, index) in imgurl" :key="index"> ...
  • Vue3 transition动画弹框问题 求助大神:这么写为什么弹窗是从底部滑上来的?正常应该从上面滑下来 <template> <div id="demo"> <button @click="show = !show"> Toggle render </button&...
  • 记一次vue 组件中使用 transitiontransition-group 设置过渡动画,总结来说可分为分为 name 版, js 钩子操作类名版, js 钩子操作行内样式版… template模板结构 // 单个元素 <transition name=自定义名字> ...
  • 如何实现切换页面时的过渡动画? 背景 今天在编写页面时,看到页面没有任何效果就只是直入直出,完全没有一点逼格,所以想要实现类似于原生app的那种切换页面时的特效,遂...import VueRouter from 'vue-router' import H
  • 主要介绍了使用vuetransition完成滑动过渡的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue - 过渡与动画transition

    万次阅读 2018-09-27 08:21:19
    这篇文章介绍Vue的过渡与动画,主要是用到组件transition。 作用范围:一般搭配v-if、v-show、动态组件、组件根节点来使用。在举栗子之前,我们先说说transition的钩子函数: v-enter:定义上半场过渡的初始状态;在...
  • <html lang="en"> <head> <meta charset="UTF-8"> , ...flag"> <transition> 这是一个h3h3> transition> div> <script> var app = new Vue({ el:"#app", data:{ flag:false }, methods:{ } }); script> body> html>
  • vue组件transition使用js钩子执行时间设置 今天在做vue项目的时候,需要写一个动画效果,就是点击实现领钱的一个动画效果,用到了vue组件transition动画,用的过程中遇到了一个问题,js钩子没有设置时间导致动画...
  • Vuetransition过渡效果

    千次阅读 2019-09-16 13:30:12
    进入/离开过渡效果:Vue在插入、更新或移除DOM时,可以设置一些动画效果; 如何使用过渡效果:利用<transition></transition>组件将需要应用的过渡效果的DOM对象包裹住,然后书写对应的样式; 过渡的...
  • vue2.x过渡(transition)与动画(animationend)

    千次阅读 2019-06-01 13:21:21
    Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 示例: <div id="demo"> <button v-on:...
  • transition: opacity 0.5s ease; } .fade-enter-from, .fade-leave-to { opacity: 0; } 折叠面板效果过渡 折叠需要考虑很多方面的问题, 例如子元素是否有 padding 或者 margin, 如果有将会造成抖动或者闪烁,...
  • 页面动画用transition这个apihtml:js:export default {name: 'App',data(){return{transitionName:''}},components:{Footsong,Slider,Ellipsis,WhichSong,Loading},watch: {'$route' (to, from) {const toDepth = to...
  • 主要介绍了Vue 过渡(动画)transition组件案例详解,非常不错,具有参考借鉴价值,需要的朋友参考下
  • vue页面切换过渡transition

    千次阅读 2018-10-08 11:15:51
    首先得有你想要的过渡效果css代码: .vux-pop-out-enter-active, .vux-pop-out-leave-active, .vux-pop-in-enter-active, .vux-pop-in-leave-active { ... transition: all 500ms; height: 100%; posit...
  • 前言 vue中引入使用 animinate.css 安装: Install with npm: npm install animate.css --save with yarn: yarn add animate.css 引入 main.js import animated from "animate.css"; Vue.use(animated); 组件中...
  • vue2.0 transition -- 动画使用心得

    千次阅读 2017-09-01 14:27:59
    这个案例其实很简单,通过一个transition来触发多个子元素的过渡效果,我们只需要定义元素对应的过渡效果就可以,其他事情vue会帮我们搞定,由此可以扩展出其他酷炫的过渡场景效果。先来看看这个简单案例的代码
  • vue 使用 transition 做页面过渡切换时引起的 position 定位问题 vue项目 home 页面的 <router-view /> 使用了 transition 包裹起来做过渡效果的页面切换,当切换到 info 页面,如图: home页面 <template&...
  • transition子元素加上一个key,显示异常时使用不同的key即可 <transition> <div key={this.isActive?'1':'2'} style={{display:this.isActive?'block':'none'}} > hello </div> </...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,173
精华内容 10,469
关键字:

transitionvue

vue 订阅