如何利用vue实现css过渡和动画

目录

一、过渡和动画的区别

过渡:通常用来表示元素上属性状态的变化。

动画:通常用来表示元素运动的情况。

二、使用Vue实现基础得css过渡与动画

1. 动画

/* css */
@keyframes leftToRight {
    0% {
        transform: translateX(-100px);
    }
    50% {
        transform: translateX(-50px);
    }
    100% {
        transform: translateX(0);
    }
}
.animation {
    animation: leftToRight 3s;
}
// js
const app = Vue.createApp({
    data() {
        return {
            animate: {
                animation: true
            }
        }
    },
    methods: {
        handleClick(){
            this.animate.animation = !this.animate.animation
        }
    },
    template: `
        <div :class='animate'>hello</div>
        <button @click='handleClick'>切换</button>
    `
});

2. 过渡

/* css */
.transition {
    transition: background-color 3s linear 0s;
}

.gold {
    background-color: gold;
}

.cyan {
    background-color: cyan;
}
// js
const app = Vue.createApp({
    data() {
        return {
            animate: {
                transition: true,
                gold: true,
                cyan: false
            }
        }
    },
    methods: {
        handleClick() {
            this.animate.gold = !this.animate.gold;
            this.animate.cyan = !this.animate.cyan;
        }
    },
    template: `
        <div :class='animate'>hello</div>
        <button @click='handleClick'>切换</button>
    `
});

以上是通过设置class属性实现的,同样通过设置style属性也可以实现:

/* css */
.transition {
    transition: background-color 3s linear 0s;
}
// js
data() {
    return {
        transition: 'transition',
        styleObject: {
            backgroundColor: 'gold'
        }
    }
},
methods: {
    handleClick() {
        if(this.styleObject.backgroundColor === 'gold'){
            this.styleObject.backgroundColor = 'cyan';
        }else{
            this.styleObject.backgroundColor = 'gold';
        }
    }
},
template: `
    <div :class='transition' :style='styleObject'>hello</div>
    <button @click='handleClick'>切换</button>
`

三、使用transition标签实现单元素/组件的过渡和动画效果

1. transition 的基本介绍

  • <transition> 元素作为单个元素/组件的过渡效果。
  • <transition> 只会把过渡效果应用到其包裹的内容上,而不会额外渲染 DOM 元素,也不会出现在可被检查的组件层级中。

2. transition 的过渡class

在进入/离开的过渡中,会有 6 个 class 切换:

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

3. 过渡示例

将需要过渡的元素使用transition标签包裹。设置过渡需要的class,可从以上六种class中选择。

/* css */
/* .v-enter-from {
    opacity: 0;
}
.v-enter-active {
    transition: opacity 1s ease;
}
.v-enter-to {
    opacity: 1;
}
.v-leave-from {
    opacity: 1;
}
.v-leave-active {
    transition: opacity 1s ease;
}
.v-leave-to {
    opacity: 0;
} */
/* 简写 */
.v-enter-from, .v-leave-to{
    opacity: 0;
}
.v-enter-active, .v-leave-active{
    transition: opacity 1s ease;
}
// js
const app = Vue.createApp({
    data() {
        return {
            show: true
        }
    },
    methods: {
        handleClick() {
            this.show = !this.show;
        }
    },
    template: `
        <transition>
            <div v-if='show'>hello</div>
        </transition>
        <button @click='handleClick'>切换</button>
    `
});

4. 动画示例

使用动画效果只需要修改css部分,js部分功能不变。

/* css */
@keyframes shake-in {
    0% {
        transform: translateX(-50px);
    }
    50% {
        transform: translateX(50px);
    }
    100% {
        transform: translateX(0px);
    }
}
@keyframes shake-out {
    0% {
        transform: translateX(50px);
    }
    50% {
        transform: translateX(-50px);
    }
    100% {
        transform: translateX(0px);
    }
}
.v-enter-active{
    animation: shake-in 1s ease-in;
}
.v-leave-active{
    animation: shake-out 1s ease-in-out;
}

5. transition的name属性

  • name - string :用于自动生成 CSS 过渡类名,不写默认是v。
  • name设置为hy,对应的class名称也要改为hy开头。
  • // js
    <transition name='hy'>
        <div v-if='show'>hello</div>
    </transition>

/* css */
.hy-enter-from, .hy-leave-to{
    opacity: 0;
}
.hy-enter-active, .hy-leave-active{
    transition: opacity 1s ease;
}

6. 自定义过渡类名

我们可以通过以下 attribute 来自定义过渡类名:

  • enter-from-class
  • enter-active-class
  • enter-to-class
  • leave-from-class
  • leave-active-class
  • leave-to-class

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

// 首先引入样式文件
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="external nofollow"  />

const app = Vue.createApp({
    data() {
        return {
            show: true
        }
    },
    methods: {
        handleClick() {
            this.show = !this.show;
        }
    },
    // 以自定义过渡类名的方式去添加动画样式
    template: `
        <transition name='hy'
        enter-active-class='animate__animated animate__bounce'
        leave-active-class='animate__animated animate__bounce'>
            <div v-if='show'>hello</div>
        </transition>
        <button @click='handleClick'>切换</button>
    `
});

7.同时设置过渡和动画

  • 在一些场景中,你需要给同一个元素同时设置过渡和动画,比如 animation 很快的被触发并完成了,而 transition 效果还没结束。
  • 在这种情况中,你就需要使用 type attribute 并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。
  • type - string。指定过渡事件类型,侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。

在transition时间更长时,使用type=‘transiton'的效果:

可以发现animation先完成,但transition并没有终止会一致执行完,元素才消失。

/* css */
@keyframes shake-in {
    0% {
        transform: translateX(-50px);
    }

    50% {
        transform: translateX(50px);
    }

    100% {
        transform: translateX(0px);
    }
}

@keyframes shake-out {
    0% {
        transform: translateX(50px);
    }

    50% {
        transform: translateX(-50px);
    }

    100% {
        transform: translateX(0px);
    }
}

.v-enter-from,
.v-leave-to {
    color: red;
}

.v-enter-active {
    animation: shake-in 1s ease-in;
    transition: color 3s ease-in;
}

.v-enter-to, .v-leave-from {
    color: green;
}

.v-leave-active {
    animation: shake-out 1s ease-in-out;
    transition: color 3s ease-in-out;
}
// js
const app = Vue.createApp({
    data() {
        return {
            show: true
        }
    },
    methods: {
        handleClick() {
            this.show = !this.show;
        }
    },
    template: `
        <transition type='transition'>
            <div v-if='show'>hello</div>
        </transition>
        <button @click='handleClick'>切换</button>
    `
});

 

在transition时间更长时,使用type=‘animation'的效果:

  • 可以发现animation完成后,transition也会立即终止,元素也消失了。
<transition type='animation'>
    <div v-if='show'>hello</div>
</transition>

8. duration属性

  • duration - number | { enter: number, leave: number }:指定过渡的持续时间。
  • 比css中设置的时间优先级更高。
  • 单位是:ms。
<transition :duration='100' >
    <div v-if='show'>hello</div>
</transition >

你也可以定制进入和移出的持续时间:

<transition :duration='{ enter: 1000, leave: 3000 }' >
    <div v-if='show'>hello</div>
</transition >

9. 使用js实现动画

  • 当只用 JavaScript 过渡的时候,在 enter 和 leave 钩中必须使用 done 进行回调。否则,它们将被同步调用,过渡会立即完成。
  • 添加 :css="false",也会让 Vue 会跳过 CSS 的检测,除了性能略高之外,这可以避免过渡过程中 CSS 规则的影响。

想要用js实现动画,可以在transition的 attribute 中声明 JavaScript 钩子:

@before-enter="beforeEnter" 进入过渡前
@enter="enter" 进入过渡时
@after-enter="afterEnter" 进入过渡后
@enter-cancelled="enterCancelled" 进入过渡被打断时
@before-leave="beforeLeave" 离开过渡前
@leave="leave" 离开过渡时
@after-leave="afterLeave" 离开过渡后
@leave-cancelled="leaveCancelled" 离开过渡被打断时
const app = Vue.createApp({
    data() {
        return {
            show: true
        }
    },
    methods: {
        handleClick() {
            this.show = !this.show;
        },
        handleBeforeEnter(el){
            el.style.color = 'red';
        },
        handleEnter(el, done){
            const timer = setInterval(()=>{
                if(el.style.color === 'red'){
                    el.style.color = 'blue';
                }else{
                    el.style.color = 'red';
                }
            }, 1000);
            setTimeout(()=>{
                clearInterval(timer);
                // 动画结束标志
                // 不执行done()的话,handleAfterEnter不会执行
                done();
            }, 3000)
        },
        handleAfterEnter(el){
            console.log('success');;
        }
    },
    template: `
        <transition :css='false'
        @before-enter='handleBeforeEnter'
        @enter='handleEnter'
        @after-enter='handleAfterEnter'
        >
            <div v-if='show'>hello</div>
        </transition>
        <button @click='handleClick'>切换</button>
    `
});

// js
const app = Vue.createApp({
    components: ['item-a', 'item-b'],
    data() {
        return {
            component: 'item-a'
        }
    },
    methods: {
        handleClick() {
            if (this.component === 'item-a') {
                this.component = 'item-b';
            } else {
                this.component = 'item-a';
            }
        }
    },
    template: `
        <transition mode='out-in' appear>
            <component :is='component' />
        </transition>
        <button @click='handleClick'>切换</button>
    `
});
app.component('item-a', {
    template: `<div>hello</div>`
});
app.component('item-b', {
    template: `<div>bye</div>`
});

四、组件和元素切换动画的实现

  • mode - string 控制离开/进入过渡的时间序列。
  • 有效的模式有 先出后进: "out-in" 和 先进后出:"in-out";默认同时进行。
  • 可以通过 appear attribute 设置节点在初始渲染的过渡。
/* css */
.v-enter-from,
.v-leave-to {
    opacity: 0;
}

.v-enter-active,
.v-leave-active {
    transition: opacity 1s ease-in;
}

.v-enter-to,
.v-leave-from {
    opacity: 1;
}
// js
const app = Vue.createApp({
    components: ['item-a', 'item-b'],
    data() {
        return {
            component: 'item-a'
        }
    },
    methods: {
        handleClick() {
            if (this.component === 'item-a') {
                this.component = 'item-b';
            } else {
                this.component = 'item-a';
            }
        }
    },
    template: `
        <transition mode='out-in' appear>
            <component :is='component' />
        </transition>
        <button @click='handleClick'>切换</button>
    `
});
app.component('item-a', {
    template: `<div>hello</div>`
});
app.component('item-b', {
    template: `<div>bye</div>`
});

五、列表动画

  • 使用 <transition-group> 组件,可以同时渲染整个列表。
  • 内部元素总是需要提供唯一的 key attribute 值。
  • CSS 过渡的类将会应用在内部的元素中,而不是这个组/容器本身。
  • <transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画,还可以改变定位。要使用这个新功能只需使用新增的 v-move 类。
/* css */
.inline-block {
    display: inline-block;
    margin-right: 10px;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
    transform: translateY(30px);
}

.v-enter-active {
    transition: all 1s ease;
}

.v-leave-active {
    position: absolute;
}

.v-move {
    transition: all 1s ease;
}

六、状态动画

对于数据元素本身而言,通过数字和运算、颜色的显示、SVG 节点的位置、元素的大小和其他的 property 这些属性的变化,同样可以实现动画的效果。

数字变化示例:

const app = Vue.createApp({
    data() {
        return {
            number: 1
        }
    },
    methods: {
        handleClick() {
            const timer = setInterval(() => {
                if (this.number >= 10) {
                    clearInterval(timer)
                }else{
                    this.number++;
                }
            }, 100);
        }
    },
    template: `
        <div>{{number}}</div>
        <button @click='handleClick'>增加</button>
    `
});

 

总结

到此这篇关于如何利用vue实现css过渡和动画的文章就介绍到这了,更多相关vue实现css过渡和动画内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • web前端vue之CSS过渡效果示例

    过渡效果在交互体验中的重要性不言而喻.以往我们使用js或Jquery添加或移除元素的类(class),搭配CSS中定义好的样式,再引用一些javascript库之后,可以做作出非常复杂,惊艳的动态效果,不过这套方法还是太繁琐. vue.js内置了一套过渡系统,可以在元素从DOM中插入或移除时自动应用过渡效果.vue会在是党的时机触发css过渡或者动画,你也可以提供相应的javascript钩子函数在过渡过程中执行自定义的DOM操作. 每个过渡效果,都需要在目标元素上使用transition特性.

  • Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)

    以一个toggle按钮控制p元素显隐为例,如果不使用过渡效果,则如下所示 <div id="demo"> <button v-on:click="show = !show">Toggle</button> <p v-if="show">蓝色理想</p> </div> <script> new Vue({ el: '#demo', data: { show: tru

  • 如何利用vue实现css过渡和动画

    目录 一.过渡和动画的区别 二.使用Vue实现基础得css过渡与动画 1. 动画 2. 过渡 三.使用transition标签实现单元素/组件的过渡和动画效果 1. transition 的基本介绍 2. transition 的过渡class 3. 过渡示例 4. 动画示例 5. transition的name属性 6. 自定义过渡类名 7.同时设置过渡和动画 8. duration属性 9. 使用js实现动画 四.组件和元素切换动画的实现 五.列表动画 六.状态动画 总结 一.过渡和动画的区

  • Vue中实现过渡动画效果示例代码

    目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画的使用 同时设置两种动画(了解) 过渡的模式mode 列表过渡 列表过渡的介绍 列表过渡的使用 Vue的transition动画 Transition动画的使用 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在R

  • Vue中实现过渡动画效果实例详解

    目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画的使用 过渡的模式mode 列表过渡 列表过渡的介绍 列表过渡的使用 总结 Vue的transition动画 Transition动画的使用 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在React中使用过渡动

  • Vue.js每天必学之过渡与动画

    通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果.Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作. 为了应用过渡效果,需要在目标元素上使用 transition 特性: <div v-if="show" transition="my-transition"></div> transition 特性可以与下面资

  • Vue 过渡(动画)transition组件案例详解

    Vue过度(动画),本质走的是CSS3:transtion,animation. 控制器div显示/隐藏,代码如下: <div id="box"> <input type="button" value="按钮" @click="toggle"> <div id="div1" v-show="isShow"></div> </div&g

  • Vue 解决路由过渡动画抖动问题(实例详解)

    前言 Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置.路由参数等功能,让单页面应用变得更易于管理.良好的路由管理尤为重要,比如路由拦截.路由懒加载.路由权限等都在开发中起着至关重要的作用.同时路由还支持视图过渡效果,没有添加过渡动画的路由切换会感觉很生硬,为了提高用户体验,路由过渡还是很有必要的.毕竟做出来,自己看着也舒服. 过渡动效文档:https://cn.vuejs.org/v2/guide/transitions.html 过渡动画抖动 代码片段 这里为

  • vue学习笔记之Vue中css动画原理简单示例

    本文实例讲述了Vue中css动画原理.分享给大家供大家参考,具体如下: 当transition包裹了一个元素之后,vue会自动分析元素的css样式,构建动画流程. so,我们需要定义style. vue中的css动画,其实就是某一个时间点,给元素再增加了一个css样式体现的. v-if.v-show.动态组件 都可以实现过渡效果. 如果没有给transition定义name,vue中默认是.v-enter..v-leave-to. <!DOCTYPE html> <html lang=&

  • 利用CSS制作3D动画

    目录 CSS 3D 基础知识 使用 transform-style 启用 3D 模式 利用 perspective & perspective-origin 设置 3D视距,实现透视/景深效果 通过绘制 Webpack Logo 熟悉 CSS 3D 实现文字的 3D 效果 3D 氖灯文字效果 利用 CSS 3D 配合 translateZ 实现真正的文字 3D 效果 利用距离.角度及光影构建不一样的 3D 效果 3D 计数器 空间效果 空间 3D 效果热身 利用图片素材 3D 无限延伸视角动画

随机推荐