Question

我正尝试在纯Angular 6中制作自定义的多幻灯片轮播，与自动播放一样。但是我无法弄清楚当它们改变时如何添加动画或过渡。我是angular的初学者，但我坚持要这样做。没有其他办法可以帮助您。

假设，我首先显示1 2 3 4，2秒后我想显示2 3 45。我尝试了下面给出的方法

方法1：

首先，我将所有幻灯片（1、2、3 ...）推入一个数组并将其从父项中删除。
我只给父项添加了四个项目
然后，每隔2秒，我就删除了parent的第一个元素，并使用renderer2将数组中的一项添加到了parent。
我无法添加动画或过渡。

方法2：

每隔2秒，我会删除父项的第一项，并将其作为最后一项附加到父项。
我无法添加动画或过渡。

方法3：

首先，我将所有幻灯片（1、2、3 ...）推入一个数组并将其从父项中删除。
我只向父级（1,2,3,4,5）添加了四个项目
2秒后，删除所有这四种形式的父级
追加另外四个元素（2,3,4,5,6）
我在CSS中添加了动画
但这并不完美。

====>我正在为这种方法3提供代码

当动画改变时，如何应用动画或过渡。这样做的最佳方法是什么。如果我无法向您说明清楚，请原谅我。

HTML：

POST /bucketxxxxx/filename?uploadId=OTc2NzgwNTItMzZjNS00MWJlLTk3Y2YtOWNlNDU5MjI0MGFl HTTP/1.1

User-Agent: S3 Browser 8-1-5 https://s3browser.com

Authorization: AWS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Content-MD5: z8hR0GST3Hm6f518pQ7XUQ==

x-amz-date: Thu, 20 Dec 2018 04:22:54 GMT

Host: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Content-Length: 1173



<CompleteMultipartUpload><Part><PartNumber>1</PartNumber><ETag>"3e27d45b10b2d069a00eb079a62b90ea"</ETag></Part><Part><PartNumber>2</PartNumber><ETag>"eea2223793a13e29bbef110f92b29e40"</ETag></Part><Part><PartNumber>3</PartNumber><ETag>"b9bf9ef5a37f63c72eb108767e64d56f"</ETag></Part><Part><PartNumber>4</PartNumber><ETag>"0667c6da478617af1cf86c3f4f0e86ac"</ETag></Part><Part><PartNumber>5</PartNumber><ETag>"5433c390b9fc98fd90b9c0334f56beba"</ETag></Part><Part><PartNumber>6</PartNumber><ETag>"4539dcbbac5f028637d17180a674881e"</ETag></Part><Part><PartNumber>7</PartNumber><ETag>"b079a02747e444b95bec8d3374e1b6df"</ETag></Part><Part><PartNumber>8</PartNumber><ETag>"9f22ca90596f4ff455e1ab79ba12fdc0"</ETag></Part><Part><PartNumber>9</PartNumber><ETag>"c573cc702aa3f17cea3ca4248e6c20e9"</ETag></Part><Part><PartNumber>10</PartNumber><ETag>"b6d53f23fd0fa4bb5b8e702f0cdc2661"</ETag></Part><Part><PartNumber>11</PartNumber><ETag>"e780dd0053d08366b062deb640d61e4d"</ETag></Part><Part><PartNumber>12</PartNumber><ETag>"a212f6c80c8511c6a26405f909dacc70"</ETag></Part><Part><PartNumber>13</PartNumber><ETag>"5530ed86f6423ad8ab1c0cb2a703e9ef"</ETag></Part></CompleteMultipartUpload>




root@VM# echo -n "<CompleteMultipartUpload><Part><PartNumber>1</PartNumber><ETag>"3e27d45b10b2d069a00eb079a62b90ea"</ETag></Part><Part><PartNumber>2</PartNumber><ETag>"eea2223793a13e29bbef110f92b29e40"</ETag></Part><Part><PartNumber>3</PartNumber><ETag>"b9bf9ef5a37f63c72eb108767e64d56f"</ETag></Part><Part><PartNumber>4</PartNumber><ETag>"0667c6da478617af1cf86c3f4f0e86ac"</ETag></Part><Part><PartNumber>5</PartNumber><ETag>"5433c390b9fc98fd90b9c0334f56beba"</ETag></Part><Part><PartNumber>6</PartNumber><ETag>"4539dcbbac5f028637d17180a674881e"</ETag></Part><Part><PartNumber>7</PartNumber><ETag>"b079a02747e444b95bec8d3374e1b6df"</ETag></Part><Part><PartNumber>8</PartNumber><ETag>"9f22ca90596f4ff455e1ab79ba12fdc0"</ETag></Part><Part><PartNumber>9</PartNumber><ETag>"c573cc702aa3f17cea3ca4248e6c20e9"</ETag></Part><Part><PartNumber>10</PartNumber><ETag>"b6d53f23fd0fa4bb5b8e702f0cdc2661"</ETag></Part><Part><PartNumber>11</PartNumber><ETag>"e780dd0053d08366b062deb640d61e4d"</ETag></Part><Part><PartNumber>12</PartNumber><ETag>"a212f6c80c8511c6a26405f909dacc70"</ETag></Part><Part><PartNumber>13</PartNumber><ETag>"5530ed86f6423ad8ab1c0cb2a703e9ef"</ETag></Part></CompleteMultipartUpload>" | openssl md5 -binary | openssl enc -base64


cLC/vE8pS43jD2ZSgUB5iQ==

SASS：

    <div class="custom-carousel" #carousel>
        <div class="carousel-item">1</div>
        <div class="carousel-item">2</div>
        <div class="carousel-item">3</div>
        <div class="carousel-item">4</div>
        <div class="carousel-item">5</div>
        <div class="carousel-item">6</div>
        <div class="carousel-item">7</div>
    </div>

.TS：

.carousel-item {
        display: inline-block;
        height: 300px;
        width: 300px;
        background-color: red;
        margin: 10px;

        //a mixin called keyframe

        @include keyframe(goLeft){
            from {
                transform: translateX(0px);
            }
            to {
                transform: translateX(-300px);
            }
        }

        animation: goLeft 2s ease-out;
}

角度6的多幻灯片定制轮播

0 个答案: