vue transition和animate.css 设置不同效果延时和时常_Vue.js

上一篇: vue下使用 mint-ui，修改主题样式... 下一篇:为公司架构一套高质量的 Vue UI ...

vue transition和animate.css 设置不同效果延时和时常

发布时间：2019-05-25 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了vue transition和animate.css 设置不同效果延时和时常，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

vue：transition:
https://cn.vuejs.org/v2/guide...

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>动画</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <link rel="stylesheet" type="text/css" href="https://daneden.github.io/animate.css/animate.min.css" />
        <style type="text/css">
            p {
                width: 300px;
                height: 300px;
                background: red;
                margin: 10px auto;
                opacity: 1;
            }
            
            .slide-fade-enter-active {
                transition: all 1s ease;
            }
            
            .slide-fade-leave-active {
                transition: all 1s;
            }
            
            .slide-fade-enter,
            .slide-fade-leave-active {
                opacity: 0;
            }
        </style>

    </head>

    <body>
        <div id="box">
            <!-- 控制数据的值切换显示隐藏 -->
            <button @click="show=true">transition</button>

            <transition enter-active-class="zoomInLeft"  v-on:before-enter="beforeEnter">
                <p v-show="show" class="animated" animate-delay="0s" animate-duration="1s" ></p>
            </transition>

            <!-- 第二种方法 -->
            <!--<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight" v-on:before-enter="beforeEnter" :animate-delay="delay" :animate-duration="duration">
                <p v-show="show" animate-delay="1s" animate-duration="2s" ></p>
            </transition>-->

            <!-- 多元素运动 -->
            <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight"  v-on:before-enter="beforeEnter">
                <p v-show="show" class="animated" :key="1"  animate-delay="1s" animate-duration="2s"></p>
                <p v-show="show" class="animated" :key="2"  animate-delay="2s" animate-duration="3s"></p>
            </transition-group>
        </div>
        <script type="text/javascript">
            window.onload = function() {
                var app = new Vue({
                    el: '#box',
                    data: {
                        show: false
                    },
                    methods: {
                        beforeEnter: function(el) {
                            var delay = el.getAttribute('animate-delay'),
                                duration = el.getAttribute('animate-duration');
                            console.log('attr:' + delay, duration);
                            var cssObj = {
                                "animation-delay": delay,
                                "-webkit-animation-delay": delay,
                                "animation-duration": duration,
                                "-webkit-animation-duration": duration,
                                "visibility": "visible"
                            }
                            var getCssText = function(obj) {
                                var text = [];
                                for(var o in obj) {
                                    text.push(o + ":" + obj[o])
                                }
                                return text.join(';')
                            }
                            el.style.cssText = getCssText(cssObj);
                        },
                    }
                })
            }
        </script>
    </body>

</html>

脚本宝典总结

以上是脚本宝典为你收集整理的vue transition和animate.css 设置不同效果延时和时常全部内容，希望文章能够帮你解决vue transition和animate.css 设置不同效果延时和时常所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：Vue

上一篇: vue下使用 mint-ui，修改主题样式... 下一篇:为公司架构一套高质量的 Vue UI ...

猜你在找的Vue.js相关文章

Vue 3.0 风格指南 2024-10-19
Vue-SuperSlide(SuperSlide component for Vue) 2019-05-07
基于vue2.0的weex实践（前端视角） 2019-05-07
手把手教你写 Vue UI 组件库@vue2.0 2019-05-07
解决vue报错Failed to mount component 2019-05-07
Vue学习笔记之vue-cli项目搭建及解析 2019-05-07
Vue.js—单元测试 2019-05-07
vue2.0脚手架的安装和项目搭建 2019-05-07
Vue经典开源项目汇总demo实例github下载教程 2018-12-04
使用Vue.js构建Wordpress Gutenberg块 2018-11-17

全站导航更多

最新Vue.js教程

热门Vue.js教程