Vue中过渡与动画

1.元素的显示与隐藏,实现过渡动画效果

(1)为目标元素添加一个父元素 transition,并添加name属性

在目标元素中添加v-show=“isShow”  isShow为Vue中的data

添加button按钮控制“isShow的值

    <div id="demo">
        <button @click="isShow = !isShow">点击这里变色</button> <transition name="isd"> <div v-show="show" id="box">哈哈</div> </transition> </div>

<script>

new Vue({

el: "#demo",

data: {

isShow:true

},

methods: {

}

})

</script>

(2)在style中添加样式

.xxx-enter-active 显示过程的效果

.xxx-leave-active  隐藏过程的效果

.xxx-enter  显示前的效果

.xxx-enter-to  显示后的效果

.xxx-leave   隐藏前的效果

.xxx-leave-to   隐藏后的效果

xxx 代表transition 标签中的name属性值

.isd-enter-active,.isd-leave-active{
        transition: all 5s;
    }
    .isd-enter,.isd-leave-to{
        opacity: 0;
        transform: translateX(100px);
    }

2.自定义动画

(1)dom元素和Vue中与上述显示隐藏一样

<div id="demo">
        <button @click="show = !show">点击这里</button>

        <transition name="box">
        <p v-show="show" >哈哈哈哈</p>
        </transition>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#demo",
            data: {
              show:true
            },
            methods: {

            }
        })
    </script>

(2)自定义动画使用

定义动画    @keyframes 动画名称{  0% {}    50%{}    100%{} }  在花括号中 以百分数表示各个阶段的动画

使用动画   .xxx-enter-active,.xxx-leave-active{ animation: 动画名称 时间;}       xxx 代表transition 标签中的name属性值

.box-enter-active,.box-leave-active{
        animation: scale 10s;
    }
    @keyframes scale {
    0%{
    transform: scale(0);
    }
    50%{
    transform: scale(1.5);
    }
    100%{
        transform: scale(1);
    }
}

原文地址:https://www.cnblogs.com/zhaodz/p/11682166.html

时间: 2024-11-08 05:56:22

Vue中过渡与动画的相关文章

vue.js 过渡和动画

Vue 在插入.更新或者移除 DOM 时,动态添加css类名来达到想要的动画效果 1.transition标签 给元素包裹一个transition标签,并设置name属性的值,这个值可以随意设置,但是他会决定Dom更新时自动添加的css类名 这里name="xxx"作为演示 <div id="app"> <button @click="isShow = !isShow">点我切换显示隐藏</button> &l

vue中的半程动画

vue中使用css和第三方库完成的动画都是全程动画(又开始,有结束),当有些需求只需要又开始的动画,不需要有结束的动画时(加入购物车时,有一个小球慧聪商品按钮区域,运动到购物车图标上,并不会返回回去),他们两个不会满足需求 此时vue为我们提供了 JavaScript 钩子可以满足需求 <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="af

Vue中的动画效果

Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库,如 Velocity.js 下面分别从这个4个工具来学习Vue动画效果. 一.单元素/组件的过渡 Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进

vue中css动画原理

显示原理: <transition name='fade'> <div v-if='show'>hello world</div> </transition> 当一个元素被transition包裹了之后,vue会自动当分析元素的css样式,然后构建一个动画的流程,在动画即将被执行的一瞬间,vue会在内部标签上增加两个class名字,分别是fade-enter,fade-enter-active,在动画执行到第二帧的时候,也就是动画开始后,fade-enter

Vue 中的动画特效

Vue 中的动画特效 CSS 实现标签显隐 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U

Vue.js 过渡 &amp; 动画

Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件. 首先是无过渡效果的动画 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> <style> span._active{ background:pink; } <

vue的过渡动画

在 vue 中往往需要添加动画,但是并不像 JQ 一样可以比较容易的添加,经常我会避免使用动画,这样就不用考虑了,但是在类似轮播图中,还是需要动画效果 动画样式 1234567891011121314 .slider-enter-active { transform: translateX(0); transition: all 1s ease;}.slider-leave-active { 大专栏  vue的过渡动画transform: translateX(-100%); transitio

VUE:过渡&amp;动画

VUE:过渡&动画 vue动画的理解 1)操作css的 trasition 或 animation 2)vue会给目标元素添加/移除特定的class 3)过渡的相关类名 xxx-enter-active:指定显示的transition xxx-leave-active:指定隐藏的transition xxx-enter/xxx-leave-to:指定隐藏时的样式 <!DOCTYPE html> <html> <head> <meta charset=&qu

05.vue中js动画与Velocity.js的结合

vue中js动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中js动画</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head>