Question

我想实现一个幻灯片，它应该在click事件上滑出。我搜索了，我能够在悬停时实现滑动，但我想在点击事件上实现它。此外，滑动应该在放置在内部的按钮上的点击事件上关闭/折叠，即在示例中它应该仅在关闭按钮的点击事件上关闭。

我正在开发一个angular2应用程序，我在互联网上的例子是在Jquery上。但我想用CSS或angular2

实现它

请查看实施情况 here

任何想法如何实施？

Answer 1

有很多方法可以做到这一点，但根据你的代码，简单的是：

您只需要点击

添加一个课程

[class.slideItOut]="slideItOut" (click)="slideItOut=true"

这里：

<div id="slideout" [class.slideItOut]="slideItOut" (click)="slideItOut=true">
    <img src="http://img.usabilitypost.com.s3.amazonaws.com/1104/css_slideout/feedback.png" alt="Feedback" />
    <div id="slideout_inner">
        <form>
            <textarea></textarea>
            <input type="submit" value="Close"></input>
        </form>
    </div>
</div>

显然，如果你想让它切换：

[class.slideItOut]="slideItOut" (click)="slideItOut=!slideItOut"

然后，将您的CSS更新为：

#slideout.slideItOut {
    right: 250px;
}
#slideout.slideItOut #slideout_inner {
    right: 0;
}

另外，不要忘记在其课程中定义 slideItOut 变量：

export class MySliderComponent {

   private slideItOut = false;
...

在CSS或Angular2中单击事件的SlideOut控件

1 个答案: