vue实现三个卡片滚动切换效果

animations are a great way to make your web app come alive and feel more interesting to visit in a common place where we see animations is when scrolling down a website elements get animated as we scroll down our page and one of the easiest waste implement this is using view users motion library which uses pop motion to give us easy animation directives and composables so this is a quick look at what we're gonna be building and let's go ahead and get right into it so the first thing we want to do is inside of our view 3 app install at viewu slash motion then we can add support for v motion globally by going to our main js importing motion plugin and saying app dot use motion plugin and now we're ready to go ahead and start using it so there are a few different ways we can create animations we can use one of v motions powerful presets we can write custom animations with directives or we can use a composable and declare animations in our script so first let's start off with some of the presets inside app dot view let's clear out our script and template and inside of our template let's just create a div with a class of target and some text then as a quick example let's go to our styles， let's add a width height margin， center， artives content and a background color to our target class just to give it some styles and since we're using some of you use motions presets we can head over to the documentation and see a ton of different options and the one that i'm going to use is v motion slide visible once right which will slide our element in from the right the first time that becomes visible in the viewport if we run our app and look at our browser as soon as our page load， we'll see that we're getting that slide transition because it's already visible and if we go ahead and copy and paste this component so that we have another instance of it as we scroll down we'll see that our second component will only animate once， we reach it in the viewport and for a lot of use cases these presets give you more than enough to add that transition effect into your app， but if these presets don't offer exactly what we wanted we have two different options and the first one is declaring our animation directly inside of our template， so let's create another div with a class of target and add the directive v motion onto it once， we put this on an element the v motion allows us to write our animations as props on this element and the supported props are initial， which is the initial state of our component enter， which is the entered state， which uses the intersection observer api to detect every time our component becomes visible visible once， which only runs the first time it becomes visible over focused and tapped so these are the different style states that our component can have so ours we want to use initial invisible once， so we'll bind these to an object contain style properties and transform properties so let's say we want our opacity to be zero and our y value to be a hundred then the first time it becomes visible， so visible once， we want to set our opacity to one and our y to zero， so， that we will fade in and move up now if we reload our app we still have our first two elements and our third one will slide in from the bottom and also fade in at the same time another way that we can use this library is by using a composable called use motion so we can import that in our script and let's also import ref from view we'll say cons to target l equals ref and then inside of our template let's create another div with a class of target with a ref of target l and this is going to be the element that we're going to transition using our use motion composable finally inside a script setup we can say use motion and pass it to argument the first one is our template ref so target and the second one is a javascript object which has similar properties to the props that we just passed we can set initial and visible once and the values of these are the same that they would be in the directive now if we refresh our page as we scroll down we can see all of our elements smoothly animating in we're actually using three different ways to achieve this i'm curious to know which one's your favorite obviously the presets are super powerful， but it's also nice that it's easy to customize so we can get exactly the looking feel that were after， but i just wanted to share this library with you because i found it。

实现全屏滚动。

本期给大家带来这种图文卡片滑动切换特效。 第一步，写好整个 html 布局，这里 rado 的作用是监听 rado 是否被选中，用于改变样式， 三个切换横条使用 libo 和 rado 联系起来。 第二步，开始写样式， 图片样式， 点击切换横条，选中 rado， 更改图片样式透明度设置一，显示图片 内容样式，点击切换横条，选中 rado， 更改内容样式透明度设置一，显示内容 三个切换横条公共样式 设置切换横条的默认样式设置背景色为黑色，但是宽度为负数，隐藏起来， 点击切换的时候改变横条宽度，颜色显示出来。最后再让我们看看做好的效果， nice！

本期给大家带来这种选项卡动画特效， 第一步， h t m l 布局，我们使用 redo 做选项卡。 第二步， c s s 样式 rot 定义变量 被勾选的 redo 后第一个 label 标签更改样式，被勾选的 redo 一后更改滑动背景的配置到第一个选项卡被勾选的 redo 二后更改滑动背景的配置到第二个选项卡 被勾选的 redo 三后更改滑动背景的配置到第三个选项卡 选项卡背景的样式。如果需要原码，请关注哦！

我这里有几张这样的卡片，当我滚动这个鼠标的时候啊，他这个卡片他是无穷无尽的，但是只要你一仔细观察，你就能发现，其实这些卡片啊总共就是只有四张，其他的呢都是简单的重复排列。 那像这种效果，这种无限重复的效果是怎么实现的呢？难道是真的给他排了很多很多的卡片排成一排吗？那肯定不是啊，这样的话太 low 了。那通过这个案例呢，我们来了解一下这种无限重复的效果他的一个开发思路，那请大家先把思路最重要打在公屏上， 那这个案例效果的一个基本逻辑肯定是通过这个鼠标的滚轮滚动，然后通过计算这个滚轮滚动的一个滚动值的一个累加累减，然后把这个值呢应用在这几个卡片的复元素上，让他 产生一个横向的横向的一个位置的一个偏移，这样呢就能实现这个鼠标上下滚动，然后带动这个卡片的一个整体的一个左右位移的一个效果。 然后呢这个基本的一个设置的话呢，我们是肯定是说这几个卡片肯定是要给他设置一个复元素的，然后这个整体呢是一个居中的位置，这样呢方便我们这样的一个横向左右滚动的一个处理。然后我们呢，呃，会需要把这个元素啊做一个比较重要的一个设置， 那我们这个元素它的这个中间的这样的一个间隔呢？我们这里呢是通过元素它的一个左边距跟外边距这样的一个结合产生的。 这样的设置呢是为了让这个元素啊整体上他是一个紧密衔接的状态，这样的话呢，就方便我们后续的一些元 素的一个整体宽度的计算，不然的话呢你这个中间的空隙呢，如果你通过一些额外的方式去产生的话呢，这个后续的计算呢，会更麻烦一些。所以我们这里呢，这样一个元素的一个整体宽度，记住一定是他这个元素本身的宽度，加上他的一个左边距跟一个外边距这样的元素是一个整体。 然后呢我们其实也看到了这样我们四个元素呢是完全不够铺满这样的一个页面的一个显示宽度的，所以呢我们首先要对他做一个呃，手动的增加元素的操作，那增加到一个什么程度呢？就是刚好他的一个左边跟右边都有一个 按照顺序排列的这样一个元素完全在这个显示的一个区域的范围之外，那这两个元素呢就会起到非常关键的作用。 那接下来我们先看一下他往右移动的这样的一个逻辑的实现。那往右移动呢，其实 相当于就是我们通过这个整体的一个位移，让这个复元素产生一个位移，那位移到一定程度之后呢，比如说位移到这样的一个位置，其实我们后面这个元素就已经基本上出现了， 这个元素已经出现了的话呢，他后面是没有元素的，那右边这里的话呢，这个元素我们就可以把它放到左边这个位置过来， 对不对？左边这个位置过来，这样的话呢，你再往右滑，是不是他这个东西又能出现了同样的逻辑，他再往右滑，他这个元素是不是又可以把它放到这边来？ 这样的话呢？就会形成一个这种好像他一直都有元素不停的出来的这样的一个效果。那什么样的一个时机我们比较合适去做一个把最后一个元素 放到最前面的这样的一个操作呢？其实就可以用这样的一个元素的这样的一个整体宽度作为一个时机。 比如说他一个整体宽度是一个 x 这样的一个值，也就是当复元素这个横向的一个变化值累加到了这样的一个值的时候，我们就可以进行这样一个操作了，这里看不见的最后的这样的一个元素把它放到最前面这里， 但是我们放到前面过来之后呢，其实这里会有一个比较大的问题，因为我们这个复元素它的偏移已经形成了，比如说我们把这个东西先往下移啊，我们复制一份， 比如说我们这个复元素已经偏移到这样一个程度了，如果你把这个元素放到这个复元素的开头的话呢，其实 其实他这个复元素的偏移依然是这样的一个偏移程度。这个元素你添加到这个复元素的开头的话呢，他其实整体这个效果是这样的一个效果，而不是我们一开始哎看到的说，哎这个元素出现在这样一个位置，他还没出现的一个位置， 如果你把这个元素直接把它取过来放到最前面，然后不做任何处理的话呢，你会发现这个元素突然就会出现在开头这个位置了，所以这个复元素的偏移，我们也要对他进行一个处理，就是让他这个偏移的值呢， 减少一个元素的这样的一个宽度，这样的话呢，这个复元素呢，他会整体往往回偏移这样的一个位置，那他是不是就相当于是哎跟这样的一个状态衔接上了？所以这一步也是非常重要的，这样的话呢，他就看起来是一个无缝 连接的效果。那同样的一个原理，如果他整体是往左边滚动，左边移动其实也是类似的，他往左边移动， 比如说移动到这样的一个位置，他是一样的一个逻辑啊，他这个复元素整体往左移动的这样一个距离，那我们可以把这个元素添加到这个后面，那也就是说其实他真正添加形成的一个逻辑，他其实是这样的一个逻辑， 那我们如何能让这个东西，这个复元素整体看起来他又是一个无缝衔接的效果呢？明显 我们要让它整体往回偏移个它的一个宽度，它相当于是复元素你这个偏移值，你得再加上加上 x。 所以像这种无限循环、无限重复的这种逻辑呢，基本上他都有一些备用的元素，在这种看不见的地方进行这种无缝的进行这种切换，这样的话，你就看起来好像他这个元素永远都在不停的产生，不停的产生。

大家好啊，我们来看这页面，一进来以后，这个筛选条件的部分就占了半平，其实呢大部分筛选条件默认情况下是用不上的，所以呢我打算给他加一个折叠的效果，我们默认只留第一排，剩下的后四排都隐藏掉，我们把这个按钮往上挪一下，好，开始 这是那两个按钮，我们把它挪到上面 好看一下，然后接下来我们把后面的四排放到一个容器里面， 我们参考他这个代码，这个是滚动效果的代码，是一个这个标签配合一个 div， 然后把里面内容放到这个 div 里。好，那我们开始把它复制过来就行了，把它都拿过来吧， 放，这里面放我们要放的内容，这改个名，你叫猫，肯定是。然后把下面的这些艾特姆放埋，艾特姆都拿过来，把他都折叠起来，找一下， 把它都拿过来，然后把它缩进调一下， 然后把这个下面条件加上， 放到杯坛里面，然后呢我们需要放一个按钮，我们就在这个放门外面放一个一二八乘，用来点击 切换展开和收缩的这块我们用文字类型的，不需要样式，然后加一个艾肯动态的， 然后我们找两个图标，一个是这个向下，向下放到后面，一是这个 收起，收起用这个，然后我们加一个点击时间，点击时间就是 好，我们看一下效果， 打开那然后我们再把这个按钮集中一下，设置一下样式，我给他加一颗 mcb 田，我们加一个宽度， 让他居中一下。啊，居中。然后呢我们再加个背景 悬停的背景颜色， 背景颜色我们找一个。 好，我们再来看一下， 错了再看，然后这个稍微有点大，我们把上下的拍顶去掉，左右去掉，好变小了， 然后他太靠下了，我们往上挪一挪， 然后我们把里面的这个小图标的颜色改一下， 我们再找一个颜色差不多用这个试试， 深一点，是这个。 好，这样就可以。好了，今天就到这里，谢谢大家，再见。

大家好，这个视频带大家来做一个很简单的卡片翻转的效果，大家可以看到哈，当我们把鼠标移到页面的时候呢，哎，这一个卡片它可以翻转到背后的这一面，并且翻转的过程中呢，是有很明显的立体感了，我们来看一下这个效果呢，要怎么做？来看一下代码。 html 部分呢，比较简单，就一个地里面呢放了两张照片啊，就是我们用来翻转的这两张照片，样式上面呢也很简单，就写了一些基本的居中的样式，其他样式呢我们重新来写， 先来设置一下外面这个底，他的大小宽度呢，给他四百像素，高度的话六百像素，看一下效果先。现在两张照片呢出来了，不过大小比较大哈，给他们调整一下，设置一下这个 i m g 他的大小呢，设置和这一 个负极的这个点一按就可以了，给他设置为百分之一百，再来看一下现在呢大小就差不多了，不过我们要做这个卡片翻转，是不是先要把这两张照片给他重叠在一起，对吧？ 要让他们重叠起来呢，是比较简单的哈，加一个定位就可以了，这样子呢，他们就可以脱离文本流，并且现在他们的 top 针， left 呢，都是默认的，都是一样的，所以呢他们自然而然就重叠起来了。 来看一下现在呢出点问题了，这里我们做了这一个定位之后呢，这里不可以用百分比的，先给他改成这个具体的一个大小吧， 这里是因为呢 mg 他设置了绝对定位，但是他的负极并没有开启相对定位，对吧？所以当这个图片他脱离了文本流 之后呢，他是不会根据他直接的这个负极来进行大小的计算的，好来看下效果，现在呢，刷新哎，大小呢就没有问题了。当然啊，如果说我这里我就是要用回百分比，对吧？直接用回百分比呢，这里是有问题的哈，因为他的大小呢，不是参照他直接的这个负极了， 其实呢，已经是参照这一个波底来计算了。当然，如果这里还是要让他直接参照复原数来进行大小的计算呢，其实只要对他复原数开启一个相对定位就可以了，来看一下效果， 哎，对吧，现在呢，他的大小就恢复正常了，只不过呢，由于我们对 i m g 开启了绝对定位，所以呢，这两张图片他们就重叠在一起了，我们只看得到前面这一张哈，后面这一张呢就被覆盖住了，再给 i m g 呢增加一些样式， 设置二十像素的圆角，然后呢，设置一下阴影， 好来看一下现在呢样式就差不多了。我们再来分析一下这个卡片翻转的思路哈，我们要让这个卡片呢，他翻转过去是另外一面，对吧？ 但是呢，这两张图片他们是重叠在一起的啊，现在呢，他们是重叠在一起的，并且他们的方向呢，都是面向于我们的这一个方向，我们要让卡片翻转过来之后， 本来在后面的这张图片他的正面面向我们，对吧？这样呢，我们是不是一开始就得让后面这一张图片哈，先转个一百八十度转过去，这样他翻过来的时候才是正面面向我们，对吧？这里其实你要让哪一张先转过去呢？ 都可以，就看你希望哪一张作为这个正面了。我就让 a 二这张呢先给他转过去吧，让刘川峰这张呢作为这个正面，让他呢沿着歪轴来旋转一百八十度就可以了， 看下效果哈。刷新，哎，刚才不是说让他翻转过去之后呢，可以让后面流川枫这一张 显示在前面吗？对吧？为什么是他自个在这里翻转呢？这里呢，是由于我们 html 结构里面这个 img 他的位置是固定好的，所以呢，他这个图片他的位置也是固定的， 无论你怎么翻呢，他该在你前面，他还是在你前面，不过呢，可以通过一个 c s s 属性给他改变一下。这个图片现在沿着 y 轴呢，已经转了一百八十度，其实已经是他的背面面向我们了，我们可以给 m g 呢来设置一个 back face with， 设置成黑的意思就是说呢，当你这个图片哈背面面向我的时候呢，我就让你隐藏掉，这样呢，就只有当这个图片是正面面向我们的时候，才会显示出来了。 刷新一下，哎，现在显示出来的就是流川枫这张了。接着我们给波迪呢添加一个奥尔的维类，当鼠标移进来的时候呢，就让这个卡片翻转到另外一面， 给波底呢添加上一个 out 的围内啊。先来控制一下 a 二，一开始呢，他是转到一百八十度的位置的，鼠标移进去呢，我让他转回来零度这个位置，并且 a 二这张图片在转的同时， a 一是不是也要跟着转了？ 那 a 一他转他应该是转多少度呢？ a 二呢，他是一开始就已经转到背面去了，当鼠标移进来，再让他转回零度正面的这个位置，那 a 一要配合 a 二 一起来进行旋转，那 a 是不是应该就从零度正面的这个位置给他转到背面去，对吧？那他要转到背面去，那这里是不是应该旋转一百八十度呢？ 这里大家要稍微思考一下。要转到背面呢，是没错的，但是这个旋转的方向要考虑一下，因为 a 二是旋转一百八十度啊，转到背面的这个时候，他是一前一后同时进行旋转的， 那 a 一他转到背面呢，他就是要负的一百八十度了，这样子呢，他这个方向才可以匹配起来。再给 img 这里呢，给他加上一点过渡，给他两秒钟过渡吧， 来看下效果。把鼠标移进来，哎，他可以翻到另外一边了，但是他没有什么立体感，对吧，好像在这里缩放的感觉。我们做好的这边呢，他翻转是很 有立体感的，这里呢，看一下怎么样给他处理。这里我们要对这个卡片在翻转的时候呢，实现一种立体感的感觉呢，要给他增加两个 css 的属性。首先呢，我们要对外面这个地给他开启一个 transform style， 给他开启出一个三维空间的这么一个环境， 意思就是说我给我这个的里面的元素，哈，等一下呢，里面你这些元素进行 transform 转换的时候呢，我给你创造出一个三维三 d 的空间，不过呢，这样子还不够哈，我们可以来看下效果。这里呢，我刷新一下，把鼠标移进来， 哎，效果呢，和刚才是差不多的，虽然说现在这个空间我给你创造出了一个三 d 的空间，但是呢只有这个三维的空间他还是不够的，我们还要给他创造出一种看起来劲大圆小的 这么一种感觉。这里呢我们可以给波迪呢设置一个 prospect， 也就是呢透视，通过这个属性呢，我们可以设置一个四 g 的值哈，这里我给他一千像素 配合起来呢，就是我对这个 tiff 给他开启了一个三维的立体空间，并且我在看这个页面的时候呢，我是带有一双可以透视的这么一双眼睛来看这一个页面的， 然后这里面这个值呢，他就符合我们在实际生活中看东西劲大圆小的这么一个规则，我们就这样子来理解就可以了。这里呢来刷新一下，然后把鼠标移进来，哎，对吧？现在这个卡片翻转呢，哎，他就有立体感了， 这里我们可以试一下把这个四句的词呢给他改小一点啊，刷新一下再来移进来，对吧？这个词变小了，他旋转的这种感， 这种立体感就更加明显了，因为他更加靠近你的眼睛，对吧？但是呢这个值好像没有一千像素的时候呢好看一点啊， 好， ok， 这里呢刚才还提到一点，就是呢，这个底一定要给它开启一个相对定位，这样子下面这些 i n g 呢，它的大小 这个百分比才是相对于上面这个底部来进行计算的，对吧？不过呢我们后面对这个元素给他开启了一个三维的 间，其实这个时候是可以把相对定位这里呢给它去除掉，效果是一样的，我们可以理解成当这个元素呢开启了这个三维的空间，我就把里面的元素给他锁定住了，所以呢这个时候你的大小就是参照我来进行计算的， 来看一下效果，刷新一下大小没有问题哈，整个效果呢也没有问题， 如果说把这一具三维的空间也给他去除掉的话，这样子他的大小是会有问题的，这个时候他的大小呢就是根据这个波底来进行计算的。 这里呢我们就知道当我们把这个三维的空间给他开启起来呢，这个相对定位就可以不用设置了。好，这就是我们这个实力，感谢大家的收看。