问题描述
我想学习如何制作这样的效果https://www.apple.com/br/airpods-pro/。
更准确地说:GIF showing text change I want to do - only text change
我已经在vue上使用AOS动画进行了类似的操作,但是我不知道如何在air-pods-pro页面上使其更接近这种效果 https://imgur.com/a/d4ttb5V
在我的vue组件中的代码上方:
<script>
import AOS from 'aos';
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js';
Vue.use(AOS);
AOS.init();
export default {
name: 'Home',options: {
duration: 800,easing: [1,1],loopBottom: true,},props: {
messages: {
type: Array,default: () => [],primaryColor: {
type: String,required: true,default: 'pink',secondaryColor: {
type: String,default: 'black',data: () => ({
sections: [
{
id: 1,any_data: "I'm section 1",img_url: './images/whatever01.jpg',{
id: 2,any_data: "I'm section 2",img_url: './images/whatever02.jpg',{
id: 3,any_data: "I'm section 3",img_url: './images/whatever03.jpg',],}),};
</script>
<style lang="stylus">
ol,li
list-style: none;
padding-left: 5px;
.home-phrases
text-align: center;
color: $white;
.sections-menu
right: 1rem;
top: 50%;
.fullpage
height: 80vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
</style>
<template>
<section class="home-bg">
<div class="container">
<div class="row">
<ol>
<section v-bind:key="msg" v-for="msg in messages" class="fullpage">
<li class="home-phrases">
<h2
data-aos="fade-up"
data-aos-anchor-placement="bottom-bottom"
data-aos-delay="20"
data-aos-duration="1000">{{ msg }}</h2>
</li>
</section>
</ol>
</div>
</div>
</section>
</template>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)