文字只有放在text标签里才可以显示吗？

lifanko

我之前用的是2.0，最近刚开始用3.0，突然发现写在text标签里的文字才可以显示出来，view标签里的文字不显示，这个是正常的吗？

lifanko

而且css选择器，设置了父元素的属性，子元素不继承也是正常的吗？
比如父元素设置了文字颜色为红色，子元素颜色仍然为黑色，必须单独设置每个元素的属性才可以。

技术咨询-F

是的，写text里

技术咨询-F

lifanko 发表于 2021-4-8 22:30
而且css选择器，设置了父元素的属性，子元素不继承也是正常的吗？
比如父元素设置了文字颜色为红色，子元素 ...

正常

lifanko

我又遇到了一点问题，用3.0开发的话，css不支持animation属性吗？

放在网页上可以用的动画效果，实时预览没有效果。

技术咨询-F

还不支持

lifanko

那有没有其它办法让一个元素做画椭圆的动画呢

lifanko

我试着用js来做，代码是这样的：
let ball_1 = document.getElementById('ball_1')
ball_1.style.color = '#F40'
这样写在实时预览里有效果，但是到真机上就不行了

技术咨询-F

完整代码发一下

lifanko

第19行【ball_1.style.color = '#F40'】和第55行【transition: all 1s 0s;】在真机上没有效果，开发工具内的实时预览有效果

1. <template name='tpl'>
   
2.         <view class="page">
   
3.                 <view class="top">
   
4.                         <text class="ball_t ball_1" id="ball_1">任务奖</text>
   
5.                         <text class="ball_t ball_2" id="ball_2">活跃奖</text>
   
6.                         <text class="ball_t ball_3" id="ball_3">团队奖</text>
   
7.                         <text class="ball_t ball_4" id="ball_4">达人奖</text>
   
8.                         <text class="ball_t ball_5" id="ball_5">推广奖</text>
   
9.                 </view>
   
10.         </view>
    
11. </template>
    
12. <script>
    
13. export default {
    
14.         name: 'tpl',
    
15.         apiready() {//like created
    
16. 
    
17.                 let ball_1 = $('#ball_1')
    
18.                 setTimeout(function () {
    
19.                         ball_1.style.color = '#F40'
    
20.                 }, 500)
    
21.         },
    
22.         data() {
    
23.                 return {
    
24. 
    
25.                 }
    
26.         },
    
27.         methods: {
    
28. 
    
29.         }
    
30. }
    
31. </script>
    
32. <style>
    
33. .page {
    
34.         height: 100%;
    
35. }
    
36. 
    
37. .top {
    
38.         position: relative;
    
39.         height: 300px;
    
40.         width: 100%;
    
41. }
    
42. 
    
43. .ball_t {
    
44.         background: linear-gradient(to bottom, #abdcff, #0396ff);
    
45.         font-weight: bold;
    
46.         font-size: 12px;
    
47.         line-height: 48px;
    
48.         text-align: center;
    
49.         width: 50px;
    
50.         border-radius: 50%;
    
51.         position: absolute;
    
52.         text-shadow: 1px 1px 3px #555;
    
53.         box-shadow: 0 0 6px 1px #808080;
    
54.         border: 1px solid #bbb;
    
55.         transition: all 1s 0s;
    
56. }
    
57. .ball_1 {
    
58.         top: 200px;
    
59.         left: 60px;
    
60. }
    
61. .ball_2 {
    
62.         top: 75px;
    
63.         left: 45px;
    
64. }
    
65. .ball_3 {
    
66.         top: 20px;
    
67.         left: 150px;
    
68. }
    
69. .ball_4 {
    
70.         top: 90px;
    
71.         left: 275px;
    
72. }
    
73. .ball_5 {
    
74.         top: 200px;
    
75.         left: 250px;
    
76. }
    
77. </style>
    

复制代码