DDR爱好者之家

利用CSS3在Angular中实现动画
站长资源 2025/1/18 佚名
52 1538
DDR爱好者之家 Design By 杰米

废话不多说了，直接给大家贴实例代码。

直接看例子：

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件1</title> <script type="text/javascript" src="/UploadFiles/2021-04-02/angular.min.js">


引入angular-animate插件，我们绑定了ng-if指令，在删除和添加DOM节点的时候，angular会添加指定的class，方便我们完成动画。




.ng-enter

.ng-enter-active

.ng-leave

.ng-leave-active




现在再看看显示和隐藏。







<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件4</title>
<script type="text/javascript" src="/UploadFiles/2021-04-02/angular.min.js">


.ng-hide-remove

.ng-hide-remove-active

.ng-hide-add

.ng-hide-add-active




这个例子我们使用的是ng-show，属于显示和隐藏。上一个例子是ng-if，属于添加和删除。


回顾上一节我们提到的路由，我们可以结合起来操作。







<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件2</title> <script type="text/javascript" src="/UploadFiles/2021-04-02/angular.min.js">


这样在切换页面的时候就有淡入淡出的效果。




再回顾前面的几章讲的百度搜索：





<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件3</title> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.11.1.js">



<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件5</title>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.11.1.js">


JS动画我们使用JQ的动画库来完成，注意我们在视图上使用的是ng-if，表示添加和删除DOM节点，所以我们在控制器return leave&enter。




JS动画有了ng-if，自然就是ng-show。





<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ngAnimate插件5</title>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.11.1.js">


在控制器return addClass&removeClass，表示隐藏和显示。




                                

                                

                                     

                                
DDR爱好者之家 Design By 杰米

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            

                        

                        

                            
                            
                        

                        
                        
DDR爱好者之家 Design By 杰米

                        
                        
                    

                    

                        

                            

                                

                                    

                                        

                                    

                                    

                                        

                                            
                                        

                                    

                                

                                

                                    
ddrfans.com
                                            
                                                DDR爱好者之家 
                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                    

                                    

                                    

                                        

                                            8,675无损音乐
                                        

                                        

                                            1,324高清电影
                                        

                                        

                                            213破解软件
                                        

                                        

                                            70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米