vue图片插入与设置夜间模式/动态过渡

<template><div><div><h3>动画过渡</h3></div><div class="uuu"><h3>网站夜间模式</h3><button @click="show = !show">切换</button><div class="abc" v-if="show">模式切换/开关</div></div><div class="uuu"><button @click="show = !show">切换</button><h3>有动画过渡</h3><transition name="eee"><div class="abc" v-if="show">动态过渡效果 展示</div></transition></div><div><h3>插入图片</h3><img :src="kkk" alt="" /></div><div><h3>插入图片并且设置动画过渡</h3><transition name="eee"><img :src="kkk" alt="" v-if="show" /></transition></div><div><h3>插入图片并且设置自定义的动画过渡</h3><transition name="yyy"><img :src="kkk" alt="" v-if="show" /></transition></div></div>
</template><script>
// 导入图片路径
import kkk from "@/assets/like18.png";
// 导入完毕
export default {name: "Animation",data() {return {show: false,//   导入图片的kkk: kkk,};},
};
</script><style scoped>
.abc {width: 100px;height: 100px;background-color: salmon;color: seagreen;font-size: 20px;display: flex;justify-content: center;align-items: center;
}
.uuu {display: flex;justify-content: center;align-items: center;
}
/* 官方网址 */
/* https://cn.vuejs.org/v2/guide/transitions.html */
/* v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 */
/* v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。 */
.eee-enter,
.eee-leave-to {opacity: 0;transform: translateX(200px) scale(3);
}
.eee-enter-active,
.eee-leave-active {transition: all 2s ease-in-out;
}
/* 图片里面的效果 */
/*  */
/* 进入效果 */
.yyy-enter-active{animation: bounce 1s;
}
/* 离开效果--设置相反效果 */
.yyy-leave-active{animation: bounce 1s reverse;}
@keyframes bounce {0%{transform: scale(0);}10%{transform: scale(0.2);}20%{transform: scale(0.4);}30%{transform: scale(0.6);}
}
</style>

vue图片插入与设置夜间模式/动态过渡相关推荐

苹果手机夜间模式怎么设置_微信怎么设置夜间模式？iPhone夜间模式设置教程省电又护眼！...
最近有小伙伴后台留言问了这样一个问题,微信怎么设置夜间模式?首先微信APP目前本身并没有加入夜间模式,如果觉得夜间看手机刺眼的话,可以开启手机自动的夜间模式,大多数安卓和iOS手机都支持,开启后不仅更 ...
UiModeManager设置夜间模式和行车模式
本文来自:安卓航班网 Android在2.2时新增了一个实用的类UiModeManager可以方便的管理当前Android设备的夜间模式和行车模式,位于android.app.UiModeManage ...
如何在chrome浏览器设置夜间模式
1.打开chrome浏览器,然后在地址栏中输入"chrome://flags",如下,然后按回车键. 2.跳到这个页面时,在当前页面的搜索框中输入Auto Dark Mode fo ...
谷歌浏览器Chrome设置夜间模式
1.下载谷歌插件: 链接:https://pan.baidu.com/s/1b_UXY_rp11uTrbVNnOIOig 提取码:6hoh 复制这段内容后打开百度网盘手机App,操作更方便哦 2. ...
抖音夜间模式怎么开启android,抖音怎么设置夜间模式
大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. 以抖音version 12.5.0为例,抖音没有夜间模式,只有通过手机自身的夜间模式进行调节. 抖音是一款音乐创意短视频社交软件, ...
div vue 图片背景_div设置背景(vue设置div的背景图片)
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,p,th,td,table,textarea,select{margin:0;paddi ...
vue图片动画上下跳动_Vue 解决路由过渡动画抖动问题(实例详解)
前言 Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置.路由参数等功能,让单页面应用变得更易于管理.良好的路由管理尤为重要,比如路由拦截.路由懒加载.路由权限等都在开发 ...
Flutter 夜间模式及字体设置(2.2)
前言:这段时间都挺忙的,没来记得更新,我又要学又要更新,还要上班,每天也挺累的,希望大家看到这篇文章,觉得还行的话留下您的点赞吧~ 夜间模式设置字体设置夜间模式设置夜间模式的设置是通过主题当中的 ...
自建题库刷题小程序，添加更丰富的练习设置，模糊选项、自动切题、夜间模式、答题音效、答对移除错题、练习完交卷后统计正确率
土著刷题微信小程序v1.6,主要迭代练习设置,开发了较为实用的设置,练习交卷后,对练习结果进行统计本次练习的正确率,并且列出本次答错的试题,接下来就逐一介绍v1.6主要迭代开发的功能. 模糊选项设置 ...

vue图片插入与设置夜间模式/动态过渡

vue图片插入与设置夜间模式/动态过渡相关推荐

最新文章

热门文章